layui结合ajax实现下拉联动效果
大家好好,我是雄雄,歡迎關(guān)注公眾號:雄雄的小課堂。
昨天分享的是使用layui集合springboot實現(xiàn)圖片上傳,文章地址在這里,需要的小伙伴們可以去看看:
今天給大家分享的內(nèi)容也是那天在造項目的時候完成的,難道是不難,不過比較經(jīng)典。那就是聯(lián)動菜單的實現(xiàn)。
我們下來看看效果:
一般常見的也用在“省市級聯(lián)動菜單”,比如第一個下拉列表的值是所有省份名字,第二個則是第一個所選省的所屬市,第三個則是縣,鄉(xiāng)鎮(zhèn)、村屯等。
接下來我們看看如何實現(xiàn)該功能。
前端頁面采用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>中的代碼,主要業(yè)務(wù)都在這里面:
``
<script>layui.use(['form', 'layer','laydate'],function(){$ = layui.jquery; //獲取jquey模塊var form = layui.form; //獲取form模塊//第一個select改變事件form.on('select(classify)',function (data){//監(jiān)聽到了下拉框選擇的選項,傳遞過來// console.log(data);//在控制臺輸出信息var classfies = data.value;//再利用ajax將數(shù)據(jù)傳到后端,來獲取到對應(yīng)下拉框選項而出現(xiàn)的值$.ajax({type:"post",url:"/getCateByParentid",data:{"pid":classfies},dataType:"json",success:function (d) {// layer.alert(1122)//對應(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('請求失敗');}});});//第二個select改變事件form.on('select(twoCate)',function (data){//監(jiān)聽到了下拉框選擇的選項,傳遞過來// console.log(data);//在控制臺輸出信息var classfies = data.value;//再利用ajax將數(shù)據(jù)傳到后端,來獲取到對應(yīng)下拉框選項而出現(xiàn)的值$.ajax({type:"post",url:"/getCateByParentid",data:{"pid":classfies},dataType:"json",success:function (d) {//對應(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('請求失敗');}});});}) </script>上面我們可以看得到,數(shù)據(jù)是通過ajax請求的,接下來,看看后臺springmvc中所對應(yīng)的代碼:
//根據(jù)父編號查詢信息(給前臺傳json格式的數(shù)據(jù)) @RequestMapping("getCateByParentid") @ResponseBody public List<ProductCategory> getCateByParentid(Integer pid) {List<ProductCategory> cList = productCategoryService.getAllCategoryByParent(pid);return cList; }因為兩個ajax所請求的方法都是同一個 getCateByParentid,所以控制器中只寫一個即可,最后運行,效果就出來了。
因為兩個ajax所請求的方法都是同一個 getCateByParentid,所以控制器中只寫一個即可,最后運行,效果就出來了。
看完了嗎?看完了點個贊再走唄~
總結(jié)
以上是生活随笔為你收集整理的layui结合ajax实现下拉联动效果的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 手机显示黑白色怎么变回彩色的?
- 下一篇: layui结合ajax实现下拉菜单联动效