How to edit city by select option

I am in edit page now. I want to selct province in select option and then select a city name.

After select a province name I see undefined the city name.

I see this error 302

City

edit.blade.php

<div class="form-group row">
    <label for="province_id" class="col-md-3 col-form-label text-md-right">{{ __('Province') }}</label>

    <div class="col-md-9">
        <select id="province_id" class="form-control @error('province_id') is-invalid @enderror" name="province_id" required autocomplete="province_id">
            @foreach($provinces as $province)
                <option value="{{ $province->id }}">{{ $province->province_name }}</option>
            @endforeach
        </select>

        @error('province_id')
        <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
        @enderror
    </div>
</div>

<div class="form-group row">
    <label for="city_id" class="col-md-3 col-form-label text-md-right">{{ __('City') }}</label>

    <div class="col-md-9">
        <select id="city_id" class="form-control @error('city_id') is-invalid @enderror" name="city_id" required autocomplete="city_id">

        </select>

        @error('city_id')
        <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
        @enderror
    </div>
</div>

script.js

<script>
    $(document).on('change', '#province_id', function() {
        var province_id = $(this).val();
        var select = $('#city_id');

        $.ajax({
            type: 'get',
            url: '{!!URL::to('findIDProvince')!!}',
            data: {'id':province_id},
            success: function(data){
                select.html('');
                for (var i = 0; i < data.length; i++){
                    select.append('<option value="'+data[i].id+'">'+data[i].city_name+'</option>');
                }
            },
            error: function(){
                console.log('this is a error');
            },
        });
    });
</script>

web.php

Route::get('/findIDProvince', 'Auth\RegisterController@findIDProvince');

RegisterController.phhp

public function findIDProvince(Request $request)
{
    $data = City::select('city_name', 'id')->where('province_id', $request->id)->take(100)->get();
    return response()->json($data);
}