如何获取基于所选省份的城市列表？

我的控制器：

public function index() {
        $province = RajaOngkir::Provinsi()->all();
        $city = RajaOngkir::kota()->all();
        return view('welcome', compact('province', 'city'));
    }

我的刀片：

<div>
    <select name="province" id="">
        <option class="form-control" value="">Select Province</option>
        @foreach ($province as $info)
        <option value="{{ $info['province_id'] }}">{{ $info['province'] }}</option>
        @endforeach
    </select>

    <select name="city" id="">
        <option class="form-control" value="">Select City</option>
        @foreach ($city as $info)
        <option value="{{ $info['city_id'] }}">{{ $info['city_name'] }}</option>
        @endforeach
    </select>
</div>

截屏：

PS：我的数据来自第三方网站，我的数据库中没有数据包括country province city等等。不幸的是，正如我被建议到其他问题和网站一样，这些解决方案对我不起作用。

UPDATE

my controller:

public function index() {
        $province = RajaOngkir::Provinsi()->all();
        $city = RajaOngkir::kota()->all();
        return view('welcome', compact('province', 'city'));
    }

    public function getCityList($province_id)
    {
        $city = RajaOngkir::kota()->all()->where("province_id",$province_id)->get();
        return response()->json($city);
    }

My route:

Route::get('/', 'rajaongkirController@index');
Route::get('/get-city-list/{province_id}','rajaongkirController@getCityList');

My view (blade:

<div class="col-md-6">
                    <select name="province" id="province">
                        <option class="form-control" value="">Select Province</option>
                        @foreach ($province as $info)
                        <option value="{{ $info['province_id'] }}">{{ $info['province'] }}</option>
                        @endforeach
                    </select>

                    <select name="city" id="">
                        <option class="form-control" value="">Select City</option>
                    </select>
                </div>

<script type="text/javascript">
            $(document).ready(function() {
            $('select[name="province"]').on('change', function() {
                var provinceID = $(this).val();
                    if(provinceID) {
                    $.ajax({
                        url: '/get-city-list/'+encodeURI(provinceID),
                        type: "GET",
                        dataType: "json",
                        success:function(data) {
                        $('select[name="city"]').empty();
                        $.each(data, function(key, value) {
                            $('select[name="city"]').append('<option value="'+ value +'">'+ value +'</option>');
                            });
                        }
                    });
                    }else{
                    $('select[name="city"]').empty();
                      }
                   });
                });
        </script>

首先，将控制器索引函数更改为 -

public function index() {
    $province = RajaOngkir::Provinsi()->all();
    return view('welcome', compact('province'));
}

其次，制作一个onchange()ajax函数调用为@rahulsm的链接，并带有选定的$province_id。您调用的控制器功能可以是-

public function getCityList($province_id)
{
    $city = RajaOngkir::kota()->where("province_id",$province_id)->get();

    return response()->json($city);
}

你的 url 路由文件可能是-

Route::get('api/get-city-list/{province_id}','APIController@getCityList');

在你看来删除这个-

<select name="city" id="">
    <option class="form-control" value="">Select City</option>
    @foreach ($city as $info)
    <option value="{{ $info['city_id'] }}">{{ $info['city_name'] }}</option>
    @endforeach
</select>

对此并用ajax请求/数据填充该数据。

<select name="city" id="">
    <option class="form-control" value="">Select City</option>
</select>