Laravel jquery dependent dropdown hardcode

Is it possible to make dynamic dropdown with jquery and hardcoded laravel code. I have country in array and based on country index I want to show state in dropdown. This data are in file, they are not in database.

  ```  
    <select name ="country" id="country>
        foreach ([ 'Canada', 'UK', 'USA'] as $index => $value) {
            <option value="{{$index}}">{{$value}}</option>
        }
    </select>
    states dropdown
    
    <select name ="state" id="state>
        foreach ($states as  $index => $value) {
           <option value="{{$index}}">{{$value}}</option>
        }
    </select>
```

and states array as below:

```
public function states()
{
        return $states = [
            [
                'country_id' => 0, //index of country
                'state_id' => 1,
                'name' => 'NSW'
            ],
            [
                'country_id' => 0,
                'state_id' => 2,
                'name' => 'MQD'
            ],
            [
                'country_id' => 0,
                'state_id' => 3,
                'name' => 'PSA'
            ],
          
            [
                'country_id' => 0,
                'state_id' => 4,
                'name' => 'NOC'
            ],
            [
                'country_id' => 0,
                'state_id' => 5,
                'name' => 'WWA'
            ],
            [
                'country_id' => 1,
                'state_id' => 6,
                'name' => 'SSL'
            ],
            [
                'country_id' => 1,
                'state_id' => 7,
                'name' => 'PSQ'
            ],
         
        ];
    },
```

Jquery

```
<script>
$(document).ready(function(){
    $('#country').on('change', function() {
        var countryId = this.value
        $('#state').html('<option value="">Select State</option>'); 
      //  $.each(result.states,function(key,value){
        $("#state").append('<option value="'+value.state_id+'">'+value.name+'</option>');
       // });
    })
})
</script>


How can i show states based on country choosen. Is there anyway to filter states from 
state array based on cointry id choosen

Yassen Sayed

4 years ago

Level 2

It's easy. First, you have some issues in your code I will share the new code with you.

<label for="country">Choose country</label>
<select name="country" id="country">
    @foreach($countries as $id => $name)
        <option value="{{$id}}">{{$name}}</option>
    @endforeach
</select>

<label for="country">Choose country</label>
<select name="state" id="state">
    @foreach ($states as  $state)
        <option value="{{$state['country_id']}}">{{$state['name']}}</option>
    @endforeach
</select>

the next code will be in your controller and compact the variables only.

$states = [
        [
            'country_id' => 0, //index of country
            'state_id' => 1,
            'name' => 'NSW'
        ],
        [
            'country_id' => 0,
            'state_id' => 2,
            'name' => 'MQD'
        ],
        [
            'country_id' => 0,
            'state_id' => 3,
            'name' => 'PSA'
        ],

        [
            'country_id' => 0,
            'state_id' => 4,
            'name' => 'NOC'
        ],
        [
            'country_id' => 0,
            'state_id' => 5,
            'name' => 'WWA'
        ],
        [
            'country_id' => 1,
            'state_id' => 6,
            'name' => 'SSL'
        ],
        [
            'country_id' => 1,
            'state_id' => 7,
            'name' => 'PSQ'
        ],

    ];
    $countries = [
        'Canada',
        'UK',
        'USA'
    ];
    return view('your_view_name', compact('states', 'countries'));

And finally the JS code you need to make change dynamically.

<script>
    $(function () {
        $('#country').on('change', function () {
            let val = this.value;
            console.log(val)
            $('#state option').hide().filter(function () {
                return this.value.indexOf(val) === 0;
            })
                .show();
        })
            .change();
    });
</script>

david001

4 years ago

Level 5

@yassen sayed thanks it works but only the problem is when I change the country it still shows previous country state in drop down and when i click the state dropdown I get expected state. for example when page is rendered i get all state of first country which is fine. But If change the country I still see previous country state in state dropdown unless i click the state dropdown. can you help here. Thanks

Yassen Sayed

4 years ago

Level 2

@david001 The other must exist in the dropdown but be hidden to back to it again.

david001

4 years ago

Level 5

@Yassen Sayed i am not sure may be need extra logic in jQuery. It still shows NSW in state drop down if i choose country UK. But when I click state dropdown it shows UK state which is correct. So state is not changing its state dynamically when I change the country unless I click the state dropdown

Yassen Sayed

4 years ago

Level 2

@david001 Hmmm, I got the problem you have. Please override the next code of choose country dropdown.

<label for="country">Choose country</label>
<select name="state" id="state">
    <option value="">Select</option>
@foreach ($states as  $state)
        <option value="{{$state['country_id']}}">{{$state['name']}}</option>
    @endforeach
</select>

And override the Jquery code

<script>
    // get first dropdown and bind change event handler
    $('#country').change(function () {
        // get options of second dropdown and cache it
        let  $options = $('#state')
            // update the dropdown value if necessary
            .val('')
            // get options
            .find('option')
            // show all of the initially
            .show();
        $options
            // filter out options which is not corresponds to the first option
            .not('option[value="' + this.value + '"]')
            .hide();
    })

</script>

david001

4 years ago

Level 5

@Yassen Sayed thanks I want to show all options(state) of default country(canada) initially, not all states

The first country in the loop in Canada, so i want to show all states of Canada initially and change the state when country is changed . i think its almost done just want to show all states of default country when page reloads

Yassen Sayed

4 years ago

Best Answer

Level 2

@david001 Update your JS script to this code

<script>
    // get first dropdown and bind change event handler
    $('#country').change(function () {
        getOptions($(this).val())
    })
    $(document).ready(function () {
        let selectedCountry = $('#country option:selected').val();
        getOptions(selectedCountry)
    })
    function getOptions(val) {
        let  $options = $('#state')
            // update the dropdown value if necessary
            .val('')
            // get options
            .find('option')
            // show all of the initially
            .show();
        $options
            // filter out options which is not corresponds to the first option
            .not('option[value="' + val + '"]')
            .hide();
    }

</script>

Please or to participate in this conversation.