更改一个选择时更新多个（两个）选择选项

Question

我有 3 个选择标签：

Country
State
City

我想要的是当我更改国家/地区时，它应该更新州选择标签以及城市选择标签。

Rigth 现在我在国家/地区使用 ajax。当国家/地区更改时，它会正确更新国家标签，但城市标签不会更改。

我怎样才能实现这种行为？

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 代码：

$('#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");
            });
        });

当状态选择标签改变时获取城市的另一个 ajax：

$('#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");
            });
        });

我知道此代码仅在触发更改事件时才有效。 由于我在 ajax 之后附加数据，因此我需要检查数据是否已更改或附加，但我不知道该怎么做。我尝试了多种方法。 在JSFiddle 中，您可以看到我可以实现的目标。

谁能帮忙？？

谢谢:)

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");
            });
        });

追加选项后，可以在 AJAX 完成函数中触发 change 事件。