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