在 laravel 中根据所选省份获取城市列表

Question

如何根据所选省份获取我的城市列表？

我的控制器：

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 等。不幸的是，正如我对其他问题和网站所建议的那样，这些解决方案对我不起作用.

更新

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

我的route：

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

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

Answer 1

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

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>