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>
  1. 初始化一级部门
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();
  1. 设置一级部门联动二级部门效果。
form.on('select(departmentFirstLevel)', function(data){
    //根据一级部门联动二级部门
    initDepartmentSecondaryLevel();
});
  1. 二级部门联动逻辑,核心就是传入选择的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()
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__ 返回首页