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 done函数中触发更改事件。

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

1 个答案: