Home>

I ran into a small problem, the essence of which is that when choosing a value for one select, the options for choosing another change.

Controller Code:

public function create ()
{
    $ categories= Category :: all ();
    $ fandoms= Fandom :: all ();
    return view ('story.create', [
        'categories'= >
 $ categories,
        'fandoms'= >
 $ fandoms
    ]);
}

View:

<
div class= "form-group row" >
                    <
label for= "category-select" class= "col-md-4 col-form-label" >
Category <
/label >
                    <
select id= "category-select" class= "form-control" name= "category-select" >
                        <
option >
Viber category <
/option >
                        @foreach ($ categories as $ category)
                            <
option value= "{{$ category->
id}} ">
                                {{$ category->
category_name}}
                            <
/option >
                        @endforeach
                    <
/select >
                <
/div >
                <
div class= "form-group row" >
                    <
label for= "fandom-select" class= "col-md-4 col-form-label" >
Fandom <
/label >
                    <
select id= "fandom-select" class= "form-control" name= "fandom-select" disabled= "disabled" >
                        <
option >
Viber by fandom <
/option >
                        @foreach ($ fandoms as $ fandom)
                            @if ($ fandom->
category_id== 1)
                                <
option value= "{{$ fandom->
id}} ">
                                    {{$ fandom->
fandom_name}}
                                <
/option >
                            @endif
                        @endforeach
                    <
/select >
                <
/div >

Script:

<
script >
    $ ('# category-select'). Change (function () {
        var value= $ ("# category-select option: selected"). val ();
        if (value=== "Viber category") {
            $ ('# fandom-select'). Prop ('disabled', true);
        } else {
            $ ('# fandom-select'). Prop ('disabled', false);
        }
    });
<
/script >

The result should be like this:

  • Answer # 1

    You need to perform data processing from the user side (via JavaScript) manually, loading all the options initially into some variable. It would be more convenient to use some minimal JS framework, the same Alpine.js would be enough, but through jQuery it is also possible. It will look something like this:

    <
    div class= "form-group row" >
        <
    label for= "fandom-select" class= "col-md-4 col-form-label" >
    Fandom <
    /label >
        <
    select id= "fandom-select" class= "form-control" name= "fandom-select" disabled= "disabled" >
            <
    option >
    Viber by fandom <
    /option >
            <
    ! -Remove the list of fandoms from here ->
        <
    /select >
    <
    /div >
    

    JS:

    <
    script >
        //Load the fandom list into a variable
        let fandoms= JSON.parse ('@ json ($ fandom)') //array
        $ ('# category-select'). Change (function () {
            let value= $ ("# category-select option: selected"). val ();
            let $ select= $ ('# fandom-select');
            //Clear the list of current fandoms
            $ select.empty ();
            //Fill in the necessary data
            $ select.append ('<
    option >
    Viber by fandom <
    /option >
    ');
            fandoms.filter (fandom= >
     fandom.catefory_id=== value)
                .forEach (fandom= >
     {
                    $ select.append ($ ('<
    option >
    ', {
                        value: fandom.id,
                        text: fandom.fandom_name
                    });
                })
            $ select.prop ('disabled', value=== "Viber category")
        });
    <
    /script >
    
  • Answer # 2

    You need to perform data processing from the user side (via JavaScript) manually, loading all the options initially into some variable. It would be more convenient to use some minimal JS framework, the same Alpine.js would be enough, but through jQuery it is also possible. It will look something like this:

    <
    div class= "form-group row" >
        <
    label for= "fandom-select" class= "col-md-4 col-form-label" >
    Fandom <
    /label >
        <
    select id= "fandom-select" class= "form-control" name= "fandom-select" disabled= "disabled" >
            <
    option >
    Viber by fandom <
    /option >
            <
    ! -Remove the list of fandoms from here ->
        <
    /select >
    <
    /div >
    

    JS:

    <
    script >
        //Load the fandom list into a variable
        let fandoms= JSON.parse ('@ json ($ fandom)') //array
        $ ('# category-select'). Change (function () {
            let value= $ ("# category-select option: selected"). val ();
            let $ select= $ ('# fandom-select');
            //Clear the list of current fandoms
            $ select.empty ();
            //Fill in the necessary data
            $ select.append ('<
    option >
    Viber by fandom <
    /option >
    ');
            fandoms.filter (fandom= >
     fandom.catefory_id=== value)
                .forEach (fandom= >
     {
                    $ select.append ($ ('<
    option >
    ', {
                        value: fandom.id,
                        text: fandom.fandom_name
                    });
                })
            $ select.prop ('disabled', value=== "Viber category")
        });
    <
    /script >