ajax 三级联动

1.构造html

        

 <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>小区地址：</label>
            <div class="formControls col-xs-4 col-sm-4">
               省： <select name="fang_province" style="width: 100px;" id="fang_province">
                    <option value="">==请选择省==</option>
                    @foreach($data['cityData'] as $item)
                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                    @endforeach
                </select>

               市： <select name="fang_city" id="fang_city" style="width: 100px;">
                    <option value="">==市==</option>
                </select>

               区： <select name="fang_region" id="fang_region" style="width: 100px;">
                    <option value="">==区/县==</option>
                </select>
                
            </div>

2.js

 $("#fang_province,#fang_city").change(function () {
        let id = $(this).val();
        let _this = $(this);
        console.log(id);
        $.ajax({
            method: 'get',
            url: "{{url('getCity')}}",
            data: {
                id: id
            },
            success: function (res) {
                console.log(res)
                _this.nextAll("select").find("option").not(":first-child").remove();
                res.map(function (e) {
                    _this.next("select").append('<option value=' + e.id + '>' + e.name + '</option>')
                })
            }
        })
    })

3.php

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

4.三级联动配合的数据表

看我的资源