大家好好，我是雄雄，歡迎關(guān)注公眾號(hào)：雄雄的小課堂。

昨天分享的是使用layui集合springboot實(shí)現(xiàn)圖片上傳，文章地址在這里，需要的小伙伴們可以去看看：

今天給大家分享的內(nèi)容也是那天在造項(xiàng)目的時(shí)候完成的，難道是不難，不過比較經(jīng)典。那就是聯(lián)動(dòng)菜單的實(shí)現(xiàn)。

我們下來看看效果：

一般常見的也用在“省市級(jí)聯(lián)動(dòng)菜單”，比如第一個(gè)下拉列表的值是所有省份名字，第二個(gè)則是第一個(gè)所選省的所屬市，第三個(gè)則是縣，鄉(xiāng)鎮(zhèn)、村屯等。

接下來我們看看如何實(shí)現(xiàn)該功能。

前端頁面采用layui框架，則需要我們引入layui.css和layui.js，這里就不細(xì)說了，下面是下拉列表的代碼：

<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="">請(qǐng)選擇</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="">請(qǐng)選擇</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="">請(qǐng)選擇</option><option??th:each="cate : ${threeList}"?th:value="${cate.id}"?th:text="${cate.name}"></option></select></div></div>

? ?

代碼中：th:each="cate : ${threeList}"是thymeleaf的語法。注意每個(gè)select標(biāo)簽的name和id。

下面我們來看看<script>中的代碼，主要業(yè)務(wù)都在這里面：

<script>layui.use(['form', 'layer','laydate'],function(){$ = layui.jquery; //獲取jquey模塊var?form = layui.form; //獲取form模塊//第一個(gè)select改變事件form.on('select(classify)',function?(data){//監(jiān)聽到了下拉框選擇的選項(xiàng)，傳遞過來// console.log(data);//在控制臺(tái)輸出信息var?classfies = data.value;//再利用ajax將數(shù)據(jù)傳到后端，來獲取到對(duì)應(yīng)下拉框選項(xiàng)而出現(xiàn)的值$.ajax({type:"post",url:"/getCateByParentid",data:{"pid":classfies},dataType:"json",success:function?(d) {// layer.alert(1122)//對(duì)應(yīng)的值傳回，拼出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('請(qǐng)求失敗');}});});//第二個(gè)select改變事件form.on('select(twoCate)',function?(data){//監(jiān)聽到了下拉框選擇的選項(xiàng)，傳遞過來// console.log(data);//在控制臺(tái)輸出信息var?classfies = data.value;//再利用ajax將數(shù)據(jù)傳到后端，來獲取到對(duì)應(yīng)下拉框選項(xiàng)而出現(xiàn)的值$.ajax({type:"post",url:"/getCateByParentid",data:{"pid":classfies},dataType:"json",success:function?(d) {//對(duì)應(yīng)的值傳回，拼出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('請(qǐng)求失敗');}});});}) </script>

上面我們可以看得到，數(shù)據(jù)是通過ajax請(qǐng)求的，接下來，看看后臺(tái)springmvc中所對(duì)應(yīng)的代碼：

//根據(jù)父編號(hào)查詢信息(給前臺(tái)傳json格式的數(shù)據(jù)) @RequestMapping("getCateByParentid") @ResponseBody public?List getCateByParentid(Integer pid)?{List cList = productCategoryService.getAllCategoryByParent(pid);return?cList; }

因?yàn)閮蓚€(gè)ajax所請(qǐng)求的方法都是同一個(gè) getCateByParentid，所以控制器中只寫一個(gè)即可，最后運(yùn)行，效果就出來了。

看完了嗎？看完了點(diǎn)個(gè)贊再走唄~

往期精彩

layui上傳圖片，前端直接拷代碼，后端……

2021-03-28

微信超級(jí)更新！電腦上也能刷朋友圈了！

2021-03-26

哈哈哈哈哈哈！發(fā)現(xiàn)微信一個(gè)bug

2021-03-25

我一般在B站看這些破玩意...

2021-03-24

有哪些道理是我當(dāng)了程序員后才知道的？

2021-03-23

點(diǎn)分享

點(diǎn)點(diǎn)贊

點(diǎn)在看

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。