Getting City list base on Selected Province Stored in database, in Edit Method, in laravel 7

Question

How can I get city lists base on selected province, in Edit Method ?

Controller Code :

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

Routes :

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

view :

<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 :

<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>

my problem is : when i edit user profiles, city and province filed can't be selected base on stored city and province id in databse. I don't know where my problem is !!!

Answer 1

You have to call load_cities() when province is selected and also call it by default

1. <select name="province" id="province" class="form-control" onchange="load_cities()">
2. also when page loads call load_cities()