tp5三级联动的实现

首先注意这里

如果说一级菜单不选中的话 后边的二级菜单是没有数据的

 

 这里就要用到三级联动

第一步：先把一级菜单的数据查询展示出来 所以 pid 默认等于 0 

代码实例：

 public function addShow(){

        //查询出一级分类pid=0的所有数据 渲染到页面上

        $data = Db::table('pyg_category')->where(['pid'=>0])->select();

        return view('show/addShow',['data'=>$data]);

    }

前端代码：

  <select class="form-control select" id="cate_one">

        <option value="">--请选择一级分类--</option>

            {foreach $data as $v}

                <option value="{$v.id}">{$v.cate_name}</option>

            {/foreach}

 </select>

 每一个select标签都要给一个id

接下来就要用到 js 了 代码示例：

复制代码

<script>

    //二级分类 赋给一级分类的下拉菜单一个元素改变事件

    $("#cate_one").change(function () {

        //获取一节分类的value值

        var pid = $(this).val();

        //发送ajax请求

        $.ajax({

            url:"{:url('/category')}",/*此处写的是tp框架中的路由 如果看不懂也可以直接找路径*/

            type:'post',

            data:{pid:pid},

            dataType:'json',

            success:function (res) {

                //如果ajax发送成功 并且 code值等于200

                if (res.code == 200){

                    //提前定义好下级菜单

                    var str = '<option value="">--请选择二级分类--</option>';

                    //循环后端返回来的数据并赋值

                    $.each(res.list,function (k,v) {

                        str += '<option value="'+v.id+'">'+v.cate_name+'</option>'

                    })

                    //替换页面中的二级分类标签

                    $("#cate_two").html(str);

                }

            }

        })

    })

    //三级分类 与 二级分类格式一样、思路一样 后台的方法也可以用一个

    //自己看着改一下就行了

    $("#cate_two").change(function () {

        var pid = $(this).val();

        $.ajax({

            url:"{:url('/category')}",

            type:'post',

            data:{pid:pid},

            dataType:'json',

            success:function (res) {

                //如果ajax发送成功 并且 code值等于200

                if (res.code == 200){

                    //提前定义好下级菜单

                    var str = '<option value="">--请选择三级分类--</option>';

                    //循环后端返回来的数据并赋值

                    $.each(res.list,function (k,v) {

                        str += '<option value="'+v.id+'">'+v.cate_name+'</option>'

                    })

                    //替换页面中的三级分类标签

                    $("#cate_three").html(str);

                }

            }

        })

    })

</script>