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()