做网站推广的 什么是开户,在云服务器上搭建网站,网站建设及报价,七牛云wordpress图床大家好好#xff0c;我是雄雄#xff0c;欢迎关注公众号#xff1a;雄雄的小课堂。
昨天分享的是使用layui集合springboot实现图片上传#xff0c;文章地址在这里#xff0c;需要的小伙伴们可以去看看#xff1a;
今天给大家分享的内容也是那天在造项目的时候完成的我是雄雄欢迎关注公众号雄雄的小课堂。
昨天分享的是使用layui集合springboot实现图片上传文章地址在这里需要的小伙伴们可以去看看
今天给大家分享的内容也是那天在造项目的时候完成的难道是不难不过比较经典。那就是联动菜单的实现。
我们下来看看效果 一般常见的也用在“省市级联动菜单”比如第一个下拉列表的值是所有省份名字第二个则是第一个所选省的所属市第三个则是县乡镇、村屯等。
接下来我们看看如何实现该功能。
前端页面采用layui框架则需要我们引入layui.css和layui.js这里就不细说了下面是下拉列表的代码
div classlayui-form-itemlabel classlayui-form-label商品类别/labeldiv classlayui-input-inline stylewidth: 20%select namecategoryleveloneId lay-filterclassify idoneoption value请选择/optionoption th:eachcate : ${oneList} th:value${cate.id} th:text${cate.name}/option/select/divdiv classlayui-input-inline stylewidth: 20%select namecategoryleveltwoId lay-filtertwoCate idtwooption value请选择/optionoption th:eachcate : ${twoList} th:value${cate.id} th:text${cate.name}/option/select/divdiv classlayui-input-inline stylewidth: 20%select namecategorylevelthreeId idthreeoption value请选择/optionoption th:eachcate : ${threeList} th:value${cate.id} th:text${cate.name}/option/select/div/div代码中th:eachcate : ${threeList}是thymeleaf的语法。注意每个select标签的name和id。
下面我们来看看script中的代码主要业务都在这里面 scriptlayui.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 valued[i].idd[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 valued[i].idd[i].name/option;}$(#three).html(tmp);form.render();},error:function () {layer.alert(请求失败);}});});})
/script上面我们可以看得到数据是通过ajax请求的接下来看看后台springmvc中所对应的代码
//根据父编号查询信息(给前台传json格式的数据)
RequestMapping(getCateByParentid)
ResponseBody
public ListProductCategory getCateByParentid(Integer pid) {ListProductCategory cList productCategoryService.getAllCategoryByParent(pid);return cList;
}因为两个ajax所请求的方法都是同一个 getCateByParentid所以控制器中只写一个即可最后运行效果就出来了。
因为两个ajax所请求的方法都是同一个 getCateByParentid所以控制器中只写一个即可最后运行效果就出来了。
看完了吗看完了点个赞再走呗~
