地区三级联动--实现

html：

<div class="row cl" id="app">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>小区地址：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <select name="fang_province" id="fang_province" style="width: 100px" onchange="selectCity(this,'fang_city')" class="input-text">
                        <option value="0">省</option>
                        @foreach($data['cityData'] as $val)
                            <option value="{{$val->id}}">{{$val->name}}</option>
                        @endforeach
                    </select>
                    <select name="fang_city" id="fang_city" style="width: 100px" onchange="selectCity(this,'fang_region')" class="input-text">
                        <option value="0">市</option>
                    </select>
                    <select name="fang_region" id="fang_region" style="width: 100px" class="input-text">
                        <option value="0">区</option>
                    </select>
                </div>
            </div>

js：

　

<script type="text/javascript">
        function selectCity(obj,selectName) {
            //  得到选中的省份
            let value = $(obj).val();
            //  以省份ID获得市级ID，发起ajax请求
            $.get('{{route('admin.fang.sanJi')}}',{
                id : value
            }).then(jsonArr=>{
                let html = '<option value="0">市</option>';
                jsonArr.map(item=>{
                    var {id,name} = item;
                    html+=`<option value="${id}">${name}</option>`;
                });
                $('#'+selectName).html(html);
            })
        }
<script/>

php:

public function sanJi(Request $request)
    {
        $data = City::where('pid',$request->get('id'))->get(['id','name']);
        return $data;
    }