layui結合ajax實現下拉菜單聯動效果

時間 2021-08-15

標籤 css html 前端 jquery 程序員 ajax spring json 後端 springboot 欄目 Ajax 简体版

原文原文鏈接

你們好好，我是雄雄，歡迎關注公衆號：雄雄的小課堂。css

昨天分享的是使用layui集合springboot實現圖片上傳，文章地址在這裏，須要的小夥伴們能夠去看看：html

今天給你們分享的內容也是那天在造項目的時候完成的，難道是不難，不過比較經典。那就是聯動菜單的實現。前端

咱們下來看看效果：jquery

通常常見的也用在「省市級聯動菜單」，好比第一個下拉列表的值是全部省份名字，第二個則是第一個所選省的所屬市，第三個則是縣，鄉鎮、村屯等。程序員

接下來咱們看看如何實現該功能。ajax

前端頁面採用layui框架，則須要咱們引入layui.css和layui.js，這裏就不細說了，下面是下拉列表的代碼：spring

<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。json

下面咱們來看看<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中所對應的代碼：springboot

//根據父編號查詢信息(給前臺傳json格式的數據)
@RequestMapping("getCateByParentid")
@ResponseBody
public List getCateByParentid(Integer pid) {
   List cList = productCategoryService.getAllCategoryByParent(pid);
   return cList;
}

由於兩個ajax所請求的方法都是同一個 getCateByParentid，因此控制器中只寫一個便可，最後運行，效果就出來了。

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

往期精彩

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

2021-03-28