多级联动（三级联动）

多级联动

原理

选中顶级分类，查询出顶级分类对应的二级分类至下啦菜单，选择出二级类，查询出二级分类对应的三级分类，这个效果就是多级联动

原始实现思路

1、定义路由

2、查询顶级分类（pid=0） 发送至视图

3、循环展示

4、给顶级分类下拉框绑定内容改变事件（JS:onchange、JQ:change）

5、获取到选中的option的value值（本分类的主键id）

6、根据ID发送ajax请求

7、后端定义新方法

8、接收ajax请求的id值，就是要查询的pid的where

9、根据查询的结果风给ajax（注意：ahax不能直接return 要以JSON格式返回）

10、由于是一个二维数组，需要使用循环进行拼接

11、将循环拼接后的字符串追加至下一个select中

12、注意追加前的option必须要清空

上述实现思路，会导致代码冗余，例如：选择一级查二级时发一个ajax，选择二级查三级时又发一个ajax，代码基本一致，而后端，在显示视图时的查询（顶级查询）和根据顶级查二级、查三级的查询SQL一模一样，根据编程思想：避免代码的重复性，提高代码的重用性，简洁、快速。所以，下述思路对上述思路进行升级：

升级版思路

1、定义路径

2、直接展示添加视图，不在查询

3、页面加载后再jquery中发送ajax请求，直接传送pid值为0

4、调用controller中的方法进行查询

5、给一级、二级一级参与联动的下拉框绑定change事件，最后一个除外

6、JQuery循环拼接option，追加元素

7、同理，每次获取到选中的option的value，发送ajax，重复步骤4,5，7,

8、如果是顶级发送则直接追加至第一个select，如果不是顶级发送，应该追加的位置是当前对象的下一个select(选二级，往三级追)

代码实现

定于路由

Route::get('category','Category/index');
Route::get('getParentCatgory','Category/getParentCategory');

控制器

pubulc function index()
{
    $data=Category::where('pid','='0)->field('id,cate_name')->select()->toArray();
    
    View::assign('data',$data);
    return view::fetch('week/category');
}

/**
*根据父级id查子级
*/

public function getParentCategory(){

    $id=\request()->get('id');
    $data=Category::where('pid','=',$id)->field('id,cate_name')->select()->toArray();
    return success($data);
}

视图-HTML部分

<script>

    //绑定一个内容改变事件
    $("#cate_name").change(function(){
        
        var pid=$(this).val();
        $.ajax({
            
        url:"getParentCategory?id="+pid,
        dataType:"json",
        success:function(e){
           var str='';
           $.each(e.data,function(i,v){
                str+='<option value="+v.id +'">'+v.cate_name +'</option>'
            });
        //二级分类追加里面
        $("#cate_name_two").attr('cate_name_two')
      }
   })
})
</script>