javascript - 根据选定的省份获取城市列表存储在数据库中，在编辑方法中，在 laravel 7 中

Question

如何在编辑方法中获取基于所选省份的城市列表？

Controller 代码:

public function edit($id)
{
    $user = User::find($id);
    $provinces = DB::table('provinces')->get()->all();
    $cities = DB::table('cities')->get()->all();
    return view("management.profiles.edit", compact('user','provinces', 'cities'));
}
public function getCityList($province_id)
{
    $cities = DB::table('cities')->where("province_id",$province_id)->get();
    return response()->json($cities);
}

路线:

Route::get('change/profile/update', 'ProfileController@update')->name('panel.profile.update');
Route::get('panel/management/get-city-list/{province_id}','Management\UserController@getCityList');

查看:

<div class="row">
                                        <div class="col-xl-6">
                                            <div class="form-group">
                                                <label for="province">Province :</label>
                                                <select name="province" id="province" class="form-control">
                                                    <option value="">------------</option>
                                                    @foreach ($provinces as $province)
                                                        <option value="{{ $province->id }}" {{ $user->province == $province->id ? 'selected' : '' }}>{{ $province->name }}</option>
                                                    @endforeach
                                                </select>
                                                @error('province')
                                                <div class="invalid-feedback"> {{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-xl-6">
                                            <div class="form-group">
                                                <label for="city">City :</label>
                                                <select name="city" id="city" class="form-control" data-old-id="{{$user->city}}">
                                                    <option value="">-------------</option>
                                                </select>
                                                @error('city')
                                                <div class="invalid-feedback"> {{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>

脚本:

<script type="text/javascript">
    function load_cities() {
        let provinceID = $('#province').val();
        if (provinceID === null) {
            id = $('#province').eq(0).val();
        }
        if (provinceID) {
            $.ajax({
                url: '/panel/management/get-city-list/' + encodeURI(provinceID),
                type: "GET",
                dataType: "json",
                success: function (data) {
                    $("#city").empty();
                    $.each(data, function (key, value) {
                        let selected = null;
                        if ($('#city').data('old-id') && value.id == $('#city').data('old-id')) {
                            selected = 'selected';
                        }
                        let optionTag = `<option value="` + value.id + `" ` + selected + `>` + value.name + `</option>`;
                        $('#city').append(optionTag);
                    });
                }
            });
        } else {
            $("city").empty();
        }
    }
</script>

我的问题是:当我编辑用户个人资料时，无法根据数据库中存储的城市和省份 ID 选择城市和省份归档。我不知道我的问题出在哪里!!!

Answer 1

您必须调用load_cities()当选择省份并默认调用它时

1. <select name="province" id="province" class="form-control" onchange="load_cities()">
2. 还在页面加载时调用 load_cities()