layui下拉框聯動查詢效果

前言

之前有這麼一個功能，需要設計一個聯動效果來聯動幾個選擇框，假設這裏是院系-專業-班級，又或者省-市-縣，又或者一級部門-二級部門等等的，一個下拉框選擇聯動另一個下拉框，其實都是異曲同工之妙。

解決方案

*. 由於系統代碼爲保密，所以這裏只摘錄部分代碼並對原有的變量等做了處理。

1. HTML部分，兩個select框。

<label class="layui-form-label">一級部門</label>
<select id="departmentFirstLevel" name="departmentFirstLevel">
   <option value=""></option>
</select>

<label class="layui-form-label">二級部門</label>
<select id="departmentSecondaryLevel" name="departmentSecondaryLevel">
   <option value=""></option>
</select>

2. 初始化一級部門

function initDepartmentFirstLevel(){
   $.ajax({
       type: 'POST',
       url: "${request.contextPath}/departmentFirstLevel/list",
       data:{"searchParams":"","page":"1","limit":"99"},
       success: function (responseData) {
           if (responseData.code === 200 || responseData.code === 0) {
               var length = responseData.data.length;
               console.log("一級部門數量:"+length);
               $("#departmentFirstLevel").empty();
               $("#departmentFirstLevel").append('<option value=""></option>');
               for(var i = 0; i < length; i++) {
                   //添加option元素
                   $("#departmentFirstLevel").append("<option value='" + responseData.data[i].departmentId + "'>" + responseData.data[i].departmentName + "</option>");
               }
               //如果你是用freemaker，可以用該方法選中變量
               $("#departmentFirstLevel").val("${(user.departmentFirstLevel)!!}");
               //渲染select
               form.render('select');
           } else {
               layer.msg("加載列表失敗");
           }
       }
   });
}
//直接初始化一級部門
initDepartmentFirstLevel();

3. 設置一級部門聯動二級部門效果。

form.on('select(departmentFirstLevel)', function(data){
    //根據一級部門聯動二級部門
    initDepartmentSecondaryLevel();
});

4. 二級部門聯動邏輯，核心就是傳入選擇的i一級部門id，傳給Controller方法查詢並列出對應的二級部門，產生聯動效果。

function initDepartmentSecondaryLevel(){
    $.ajax({
        type: 'POST',
        url: "${request.contextPath}/departmentSecondaryLevel/list",
        data:{"searchParams":"{'departmentFirstLevel':'"+$("#departmentFirstLevel").val()+"'}","page":"1","limit":"99"},
        success: function (responseData) {
            if (responseData.code === 200 || responseData.code === 0) {
                var length = responseData.data.length;
                console.log("二級部門數量:"+length);
                $("#departmentSecondaryLevel").empty();
                $("#departmentSecondaryLevel").append('<option value=""></option>');
                for(var i = 0; i < length; i++) {
                    //添加option元素
                    $("#departmentSecondaryLevel").append("<option value='" + responseData.data[i].departmentId + "'>" + responseData.data[i].departmentName + "</option>");
                }
                //如果你是freemarker，可以用該方法設置選中效果
                $("#departmentSecondaryLevel").val("${(user.departmentSecondaryLevel)!!}");
                //渲染select
                form.render('select');
            } else {
                layer.msg("加載列表失敗");
            }
        }
    });
}
//如果二級部門數量較少，可以考慮直接初始化（當然， 建議不要）。
//initDepartmentSecondaryLevel()