省市县 三级联动

html代码

<select name="fang_province" id="province" style="padding: 0 10px" data-id="1" >
   <option value="">----省----</option>
       @foreach($data as $v)
          <option value="{{$v->id}}">{{$v->name}}</option>
       @endforeach
</select>
<select name="fang_city" id="city" style="padding: 0 10px" data-id="2">
   <option value="">----市----</option>
</select>
<select name="fang_region" id="region" style="padding: 0 10px">
   <option value="">----区----</option>
</select>

js代码 

方法一：

  $("#province").change(function (){
        let id = $('#province option:selected').val();
        $.ajax({
            url:"{{route('fang.create')}}",
            data:{id},
            success:function (res){
                if(res.code ==200){
                    $('#city').find("option:not(':first-child')").remove();
                    $('#region').find("option:not(':first-child')").remove();
                    $.map(res.data,function (v,k){
                        $('#city').append("<option value='"+v.id+"'>"+v.name+"</option>")
                    })

                }
            }
        })
    })
        $("#city").change(function (){
        let id = $('#city option:selected').val();
        $.ajax({
            url:"{{route('fang.create')}}",
            data:{id},
            success:function (res){
                if(res.code ==200){
                    $('#region').find("option:not(':first-child')").remove();
                    $.map(res.data,function (v,k){
                        $('#region').append("<option value='"+v.id+"'>"+v.name+"</option>")
                    })

                }
            }
        })
    })

方法二：

  $("#province,#city").change(function (){
        let id = $(this).find('option:selected').val();
        let flag = $(this).attr('data-id');

        if(flag == 1){
             $('#city').find("option:not(':first-child')").remove();
             $('#region').find("option:not(':first-child')").remove();
             getCtiy(id,'#city');
        }else {
            $('#region').find("option:not(':first-child')").remove();
            getCtiy(id,'#region');
        }
    })
function getCtiy(id,dom){
         $.ajax({
            url:"{{route('fang.create')}}",
            data:{id},
            success:function (res){
                if(res.code ==200){
                    $('#region').find("option:not(':first-child')").remove();
                    $.map(res.data,function (v,k){
                        $(dom).append("<option value='"+v.id+"'>"+v.name+"</option>")
                    })

                }
            }
        })
}

后端代码

public function create()
    {
        $data = City::where('pid',0)->get();
        if(\request()->ajax()){
            $id = \request()->get('id');
            $list = City::where('pid',$id)->get();
            return ['code'=>200,'msg'=>'success','data'=>$list];
        }
        return view('admin.fang.add',compact('data'));
    }