省市区 三级联动 jQuery

1.html

{{--             省市区三级联动       --}}
              <select name="fang_province"  id="fang_province">
                       <option value="">--请选择--</option>
                      @foreach($city as $v)
                     <option value="{{$v['id']}}">{{$v['name']}}</option>
                      @endforeach
                </select>
                   <select name="fang_city" id="fang_city">
                    <option value="">--请选择--</option>
                </select>
                   <select name="fang_region" id="fang_region">
                    <option value="">--请选择--</option>
                  </select>

2.jquery脚本

 //三级联动省市区
    $('#fang_province,#fang_city').change(function () {
         let id = $(this).val();
         $(this).nextAll('select').find('option').not(':first-child').remove();
         let _this = $(this);
         $.ajax({
             url:"{{url('admin/city')}}",
             data:{
                 id:id,
             },
             success(res){
                 // $('#fang_city option').not(":first-child").remove();
                $(res.data).map(function (index,item) {
                     _this.next('select').append("<option value='"+item.id+"'>"+item.name+"</option>");
                 })
             }
         })
    })

3.控制器

 public function city(Request $request)
    {
         $id =intval($request->get('id')) ;
         $city = City::where('pid',$id)->select(['id','name'])->get()->toArray();
         return ['code'=>200,'msg'=>'ok','data'=>$city];
    }