Laravel框架地区三级联动操作

                               地区的 msql 文件

链接：https://pan.baidu.com/s/1KER5wznJl8qikBP9dX6uUA 
提取码：1111

第一步

进行书写 HTML 的 select 效果

            //进行书写第一个联动的效果，直接将省份的值查询出来，直接渲染出来,ID为omitTion
            <select name="" id="omit">
            <option value="">---请选择省---</option>

            //这个foreach循环是我已经在模型层找到的省份值，要加上where判断pid为0
            @foreach($omit as $val)
             <option id="{{ $val->id }}" value="{{ $val->id }}">
                {{ $val->name }}
             </option>
             @endforeach
            </select>

            //  可以进行参考  $omit = DB::table('city')->where('pid',0)->get();

            //书写市的联动，并起ID名为city
            <select name="" id="city">
                <option value="">---请选择市---</option>
            </select> 

            //书写市的联动，并起ID名为couny
            <select name="" id="couny">
                <option value="">---请选择县---</option>
            </select>

第二步

给省份的联动设置事件，只要已选中别的省份就进行事件的操作

执行 AJAX 来获取市的内容           （  两个AJAX几乎一样，可以进行合并成为一个事件  ）

<script type="text/javascript">

//设置事件操作
$("#omit").change(function ()
    {
        //获取到省选中的ID值
        let id = $(this).val();

        //执行 AJAX 操作
        $.ajax({
           url:'/index.php/Fangattr/maket',
           type:'get',
           dataType:'json',
           data:{
               id:id
           },
           success:function (e)
           {
                //选中新的内容，将旧值进行删除操作
                $("#city option").not(":first-child").remove();
            
                //注意，e.msg 是我json返回值，我把市的值扔到msg中了，不是放在data中
                $(e.msg).each(function (key , item){
                
                    //将市的内容进行拼接展示出来，一定要写class和id，不然没有办法获取市的ID
                    $("#city").append("<option id='"+item.id+"' value='"+item.id+"'>"+item.name+"</option>")
                })
           }
        });
    });

    //和省份的ajax几乎一样，只是id不同罢了
    $("#city").change(function ()
    {
        let id = $(this).val();
        $.ajax({
            url:'/index.php/Fangattr/bstr',
            type:'get',
            dataType:'json',
            data:{
                id:id
            },
            success:function (e)
            {
               $("#couny option").not(":first-child").remove();
               $(e.msg).each(function (key , item)
               {
                   $("#couny").append("<option value='"+item.id+"'>"+item.name+"</option>")
               })
            }
        });
    })

</script>

第三步

进行控制器的书写操作，注意，两个控制器的内容一模一样

 public function maket(Request $request)
    {
        //取得传过来的ID值
        $id = $request->all('id');
        
        //将ID值进行pid的判断操作
        $showMaket = DB::table('city')->where('pid',$id)->get();
        return success($showMaket);
    }
    public function bstr(Request $request)
    {
        //取得传过来的ID值
        $id = $request->all('id');

        //将ID值进行pid的判断操作
        $showMaket = DB::table('city')->where('pid',$id)->get();
        return success($showMaket);
    }