大家好好，我是雄雄，歡迎關注公眾號：雄雄的小課堂。

昨天分享的是使用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实现下拉菜单联动效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。