layui结合ajax实现下拉菜单联动效果 |
您所在的位置:网站首页 › iqoo3下拉菜单 › layui结合ajax实现下拉菜单联动效果 |
大家好好,我是雄雄,欢迎关注公众号:雄雄的小课堂。 昨天分享的是使用layui集合springboot实现图片上传,文章地址在这里,需要的小伙伴们可以去看看: 今天给大家分享的内容也是那天在造项目的时候完成的,难道是不难,不过比较经典。那就是联动菜单的实现。 我们下来看看效果: 一般常见的也用在“省市级联动菜单”,比如第一个下拉列表的值是所有省份名字,第二个则是第一个所选省的所属市,第三个则是县,乡镇、村屯等。 接下来我们看看如何实现该功能。 前端页面采用layui框架,则需要我们引入layui.css和layui.js,这里就不细说了,下面是下拉列表的代码: 商品类别 请选择 请选择 请选择
代码中:th:each="cate : ${threeList}"是thymeleaf的语法。注意每个select标签的name和id。 下面我们来看看中的代码,主要业务都在这里面: 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 +=''+d[i].name+''; } $("#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 +=''+d[i].name+''; } $("#three").html(tmp); form.render(); },error:function () { layer.alert('请求失败'); } }); }); })上面我们可以看得到,数据是通过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 点分享 点点赞 点在看 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |