当一个 select 改变时更新多个（两个）select 选项

Question

我有 3 个 select 标签：

Country
State
City

我想要的是当我改变国家时它应该更新状态 select 标签以及城市 select 标签。

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 在状态 select 标签更改时获取城市：

$('#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 done函数中触发change事件

当一个 select 改变时更新多个（两个）select 选项

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

jquery

select

onchange

append

dropdown