tp5三级联动的实现

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>