多级联动（三级联动）

多级联动

原理

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

原始实现思路

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>

多级联动（三级联动）相关推荐

二级联动三级联动多级联动无限级联动下拉列表或菜单专题
二级联动三级联动多级联动无限级联动下拉列表或菜单专题三维数组数据源 A - 请选择 -北京市天津市河北省山西省内蒙古自治区辽宁省吉林省黑龙江省上海市江苏省浙江省安徽省福建省江西省山东省河南 ...
element级联选择器城市3级联动三级联动json数据
[{"value": "110000","label": "北京市","children": [{& ...
[Ajax] 案例 -- 三级联动
案例 – 三级联动什么是三级联动呢? 三个级别,联动代表这三个级别相互依赖与嵌套,唯有这样才能实现三级联动. 三级联动简单理解可以理解为两个二级联动, 只有点击省才能出现下一级的市只有点击市才能出 ...
震惊!Android原生Spinner实现三级联动
震惊!Android原生Spinner实现三级联动三级联动json数据点击免积分下载 android studio文件配置对着工程目录右键点击new -> folder ->ass ...
layui多级联动下拉框的实现_简单三级联动的实现
当我们做一些例如注册页面的时候,可能会遇到要选择地址的操作,这时会出现三个选择框,当你选择省级单位的时候会自动在选择筐中,弹出她所属的市级单位的列表,当选择市级单位时又会弹出县级单位,我们要实现的就是 ...
Select下拉框实现中国省市区三级联动
JS Select下拉框实现中国省市区三级联动联动效果以内蒙古自治区为例 distpicker.js资源获取 https://pan.baidu.com/s/1S17KyRmPfz6WYaYUV1 ...
支付宝实现省市区三级联动my.multiLevelSelect（附带省市区js数据）
应用场景可以供用户选择所在位置.喜好位置.可用于根据用户所选位置给用户提供该位置的特色美食,附近的电影院,周边环境等. 效果图展示视频支付宝省市区三级联动图片代码实现点击按钮button, ...
微信小程序实现三级联动
该三级联动是借助于vant-weapp组件库中的vant-picker多级联动实现的我们先看一下效果图我们都知道官方对vant-picker多级联动组件的介绍并不多,而且还会让初学者看的绞尽脑汁, ...
Django实现xadmin后台二级联动、三级联动（提供另一种实现方式）
目录一.先看下app文件目录二.编写models.py样例三.确定二级数据和js内容 1.编写路由urls.py 2.views传递数据,json格式 3.定制js文件四.在adminx.py ...
Android实现省市区三级联动
最近做项目时,有个需求是在用户填写的个人资料中有个选择省市区的三级联动效果,通过一番查找,在github上找到一个不错的控件:PickerView. github项目地址为:https://githu ...

多级联动（三级联动）

多级联动（三级联动）相关推荐

最新文章

热门文章