Update multiple( two ) select options when one select is changed

Question

I have 3 select tags:

Country
State
City

What I want is when I change country then it should update states select tag as well as city select tag.

Rigth Now I am using ajax on country. When country changes it updates sates tag correctly but city tag is not changed.

How I can achieve this behavior ?

HTML:

<div class="form-group m-form__group row">
                <div class="col-lg-4 {{ $errors->has('country') ? ' has-error' : '' }}">
                    <label for="country"> Country </label>
                    <select class="form-control m-input m-input--square" id="country" name="country">
                        <option value=""> --Select Country-- </option>
                        @foreach($countries as $country)
                            <option value="{{ $country->id }}" {{ old('country') ==$country->id ? 'selected' : '' }}>{{ $country->name }} </option>
                        @endforeach
                    </select>
                    @if ($errors->has('country'))
                        <span class="help-block">
                            <strong>{{ $errors->first('country') }}</strong>
                        </span>
                    @endif
                </div>
                <div class="col-lg-4 {{ $errors->has('state_province') ? ' has-error' : '' }}">
                    <label for="state_province"> State / Province </label>
                    <select class="form-control m-input m-input--square" id="state_province" name="state_province">
                        <option value=""> --Select State / Province--</option>

                    </select>
                    @if ($errors->has('state_province'))
                        <span class="help-block">
                            <strong>{{ $errors->first('state_province') }}</strong>
                        </span>
                    @endif
                </div>
                <div class="col-lg-4 {{ $errors->has('city') ? ' has-error' : '' }}" id="citySection">
                    <label for="city"> City </label>
                    <select class="form-control m-input m-input--square" id="city" name="city">
                        <option value=""> --Select City--</option>

                    </select>
                    @if ($errors->has('city'))
                        <span class="help-block">
                            <strong>{{ $errors->first('city') }}</strong>
                        </span>
                    @endif
                </div>
            </div>

JQuery Code:

$('#country').on('change', function(event) {
            let country = $('#country').val();
            $.ajax({
                type:'POST',
                url: "{{ route("country.states") }}",
                data: {country:country,_token:CSRF_TOKEN}
            })
            .done(function(data) {
                $('#state_province').empty();
                $.each(data,function(index, el) {
                    $('#state_province').append('<option value="'+ el.id +'">'+ el.name +'</option>');  
                });
            })
            .fail(function() {
                console.log("error");
            });
        });

Another ajax to get cities when states select tag is changed:

$('#state_province').bind('change', function(event) {
            let state = $('#state_province').val();
            $.ajax({
                type:'POST',
                url: "{{ route("states.cities") }}",
                data: {state:state,_token:CSRF_TOKEN}
            })
            .done(function(data) {
                $('#city').empty();
                $('#citySection').show();
                if(data.length > 0){
                    $.each(data,function(index, el) {
                        $('#city').append('<option value="'+ el.id +'">'+ el.name +'</option>');    
                    });
                }else{
                    $('#city').val('');
                    $('#citySection').hide();
                }
            })
            .fail(function() {
                console.log("error");
            });
        });

I know this code will only work when change event is triggered. Since I am appending data after ajax I need to check if data is changed or appended but I dont know how I can do this. I have tried multiple ways. Here in JSFiddle you can see what I could achieve.

Can anyone help ??

Thanks :)

Answer 1

$('#country').on('change', function(event) {
            let country = $('#country').val();
            $.ajax({
                type:'POST',
                url: "{{ route("country.states") }}",
                data: {country:country,_token:CSRF_TOKEN}
            })
            .done(function(data) {
                $('#state_province').empty();
                $.each(data,function(index, el) {
                    $('#state_province').append('<option value="'+ el.id +'">'+ el.name +'</option>');  
                });
               $('#state_province').trigger("change");
            })
            .fail(function() {
                console.log("error");
            });
        });

You can trigger the change event in AJAX done function after appending options.