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

昨天分享的是使用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<ProductCategory> getCateByParentid(Integer pid) {List<ProductCategory> cList = productCategoryService.getAllCategoryByParent(pid);return cList; }

因為兩個ajax所請求的方法都是同一個 getCateByParentid，所以控制器中只寫一個即可，最后運行，效果就出來了。

因為兩個ajax所請求的方法都是同一個 getCateByParentid，所以控制器中只寫一個即可，最后運行，效果就出來了。

看完了嗎？看完了點個贊再走唄~

總結

以上是生活随笔為你收集整理的layui结合ajax实现下拉联动效果的全部內容，希望文章能夠幫你解決所遇到的問題。

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