layui结合ajax实现下拉菜单联动效果
大家好好,我是雄雄,欢迎关注公众号:雄雄的小课堂。
昨天分享的是使用layui集合springboot实现图片上传,文章地址在这里,需要的小伙伴们可以去看看:
今天给大家分享的内容也是那天在造项目的时候完成的,难道是不难,不过比较经典。那就是联动菜单的实现。
我们下来看看效果:
一般常见的也用在“省市级联动菜单”,比如第一个下拉列表的值是所有省份名字,第二个则是第一个所选省的所属市,第三个则是县,乡镇、村屯等。
接下来我们看看如何实现该功能。
前端页面采用layui框架,则需要我们引入layui.css和layui.js,这里就不细说了,下面是下拉列表的代码:
<div class="layui-form-item"><label class="layui-form-label">商品类别</label><div class="layui-input-inline" style="width: 20%"><select name="categoryleveloneId" lay-filter="classify" id="one"><option value="">请选择</option><option th:each="cate : ${oneList}" th:value="${cate.id}" th:text="${cate.name}"></option></select></div><div class="layui-input-inline" style="width: 20%"><select name="categoryleveltwoId" lay-filter="twoCate" id="two"><option value="">请选择</option><option th:each="cate : ${twoList}" th:value="${cate.id}" th:text="${cate.name}"></option></select></div><div class="layui-input-inline" style="width: 20%"><select name="categorylevelthreeId" id="three"><option value="">请选择</option><option th:each="cate : ${threeList}" th:value="${cate.id}" th:text="${cate.name}"></option></select></div></div>
代码中:th:each="cate : ${threeList}"是thymeleaf的语法。注意每个select标签的name和id。
下面我们来看看<script>中的代码,主要业务都在这里面:
<script>layui.use(['form', 'layer','laydate'],function(){$ = layui.jquery; //获取jquey模块var form = layui.form; //获取form模块//第一个select改变事件form.on('select(classify)',function (data){//监听到了下拉框选择的选项,传递过来// console.log(data);//在控制台输出信息var classfies = data.value;//再利用ajax将数据传到后端,来获取到对应下拉框选项而出现的值$.ajax({type:"post",url:"/getCateByParentid",data:{"pid":classfies},dataType:"json",success:function (d) {// layer.alert(1122)//对应的值传回,拼出html下拉框语句var tmp='';for (var i in d){tmp +='<option value="'+d[i].id+'">'+d[i].name+'</option>';}$("#two").html(tmp);form.render();},error:function () {layer.alert('请求失败');}});});//第二个select改变事件form.on('select(twoCate)',function (data){//监听到了下拉框选择的选项,传递过来// console.log(data);//在控制台输出信息var classfies = data.value;//再利用ajax将数据传到后端,来获取到对应下拉框选项而出现的值$.ajax({type:"post",url:"/getCateByParentid",data:{"pid":classfies},dataType:"json",success:function (d) {//对应的值传回,拼出html下拉框语句var tmp='';for (var i in d){tmp +='<option value="'+d[i].id+'">'+d[i].name+'</option>';}$("#three").html(tmp);form.render();},error:function () {layer.alert('请求失败');}});});})
</script>
上面我们可以看得到,数据是通过ajax请求的,接下来,看看后台springmvc中所对应的代码:
//根据父编号查询信息(给前台传json格式的数据)
@RequestMapping("getCateByParentid")
@ResponseBody
public List getCateByParentid(Integer pid) {List cList = productCategoryService.getAllCategoryByParent(pid);return cList;
}
因为两个ajax所请求的方法都是同一个 getCateByParentid,所以控制器中只写一个即可,最后运行,效果就出来了。
看完了吗?看完了点个赞再走呗~
往期精彩
layui上传图片,前端直接拷代码,后端……
2021-03-28
微信超级更新!电脑上也能刷朋友圈了!
2021-03-26
哈哈哈哈哈哈!发现微信一个bug
2021-03-25
我一般在B站看这些破玩意...
2021-03-24
有哪些道理是我当了程序员后才知道的?
2021-03-23
点分享
点点赞
点在看
layui结合ajax实现下拉菜单联动效果相关推荐
- jquery ajax下拉联动,jQuery Ajax MVC 下拉框联动
无刷新下拉框联动方法: Controllers代码 public JsonResult DH_Change(string DH_ID) { List TeamLeaderList = FinanceD ...
- js_jQuery【下拉菜单联动dom操作】
下拉菜单联动dom操作案例 源码: <!DOCTYPE html> <html lang="en"><head><meta charset ...
- axure添加下拉菜单联动
axure使用中会遇到下拉菜单联动的设置问题,本文分步讲解. 首先,在空白页面中拖拽一个下拉框,如下所示: 之后设置该下拉框选项,如下所示: 设置下拉框名字为班号,如下所示: 之后再拖入一个下拉框,并 ...
- WPS Excel多级下拉菜单联动去除子集中的空值
WPS Excel多级下拉菜单联动去除子集中的空值 实现效果: 在图中可以看出四个省下面的城市数量并不相等.若是按照正常操作下来的结果如下图: 我们可以看到虽然城市不为空,但是会有空选项,这不是我们要 ...
- js实现下拉菜单动画效果
js实现下拉菜单动画效果 <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...
- 动态导航多级下拉菜单 html,css3实现的多级渐变下拉菜单导航效果代码
本文实例讲述了css3实现的多级渐变下拉菜单导航效果代码.分享给大家供大家参考.具体如下: 这是一款基于css3实现的下拉菜单导航,是非常漂亮的动画菜单,而且是多级菜单的形式,测试时发现可支持5级,估 ...
- html表单下拉美化教程,html5和css3炫酷select下拉菜单美化效果
html5和css3炫酷select下拉菜单美化效果 发布日期:2015-10-20 11:11 来源: 标签: 网页技术 CSS教程 html5+css3 select下拉菜单美化 这是一款使用ht ...
- Excel多级下拉菜单联动自动匹配内容
实现效果: 如,点击"市"下方的下拉菜单,有"成都.北京.杭州.上海"四个选项,选择杭州以后,在"区"下方单元格的就会相应的出现杭州的区. ...
- Jquery实现下拉菜单滑动效果
关于下拉菜单的布局以及原始采用jquery的写法详见这篇博客:(1条消息) Jquery案例-下拉菜单_setTimeout()的博客-CSDN博客_jquery下拉菜单案例 上面这篇博客的下拉菜单案 ...
最新文章
- perl学习之(not install YAML)解决
- ubuntu_subversion_mantis_testlink使用ldap认证
- C# ASP.Net 设置外网访问
- rhce linux下如何配置lvs高可用集群
- 最长公共子序列Java代码实现
- 浅谈主动学习(Active Learning)
- apachejmeter_java源码_自定义编写jmeter的Java测试代码
- 服务器2003系统黑屏怎么办,windows-server-2003 – Windows Server 2003 – 黑屏,光标在启动时...
- 培生同意以3亿美元出售华尔街英语
- 内存溢出+CPU占用过高:问题排查+解决方案+复盘(超详细分析教程)
- Firefox推荐安装插件
- Spring之Aop代理对象的产生(一)
- 关系抽取方法总结(基于规则-传统机器学习-深度学习)
- 微信小程序——云开发入门
- CocosCreator 制作微信小游戏排行榜,超越好友,分享功能
- Golang reflect详解
- Erlang之ETS,DETS入门
- 我们数学中常用的自然常数e代表什么?看完长知识了!
- 猿圈 题库_百度传课携手猿圈 接入题库及测评服务
- 库房出入货物程序设计
热门文章
- C++实现线段树(lazy-tag方法)-区间修改,区间查询
- C++map容器-排序
- ffmpeg加环境变量
- Java RMI,Socket,HttpClient
- Codeforces Round #686 (Div. 3) E. Number of Simple Paths 基环树 + 容斥
- P3168 [CQOI2015]任务查询系统 主席树 + 差分
- CF1146F - Leaf Partition(树形dp)
- CF993E Nikita and Order Statistics
- I. Intersections
- 牛客题霸 [	验证IP地址] C++题解/答案