layui下拉框联动查询效果

川长思鸟来 2023-07-25 09:15 20阅读 0赞

## 前言 ##

之前有这么一个功能，需要设计一个联动效果来联动几个选择框，假设这里是院系-专业-班级，又或者省-市-县，又或者一级部门-二级部门等等的，一个下拉框选择联动另一个下拉框，其实都是异曲同工之妙。  
![在这里插入图片描述][20200413232427329.png]

## 解决方案 ##

\*. 由于系统代码为`保密`，所以这里只摘录`部分`代码并对原有的变量等做了`处理`。

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

[20200413232427329.png]: /images/20230528/80f7775fc09a40cb94c40fe91afbd68e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，20人围观）

还没有评论，来说两句吧...

相关阅读

相关 layui下拉框联动查询效果

前言之前有这么一个功能，需要设计一个联动效果来联动几个选择框，假设这里是院系-专业-班级，又或者省-市-县，又或者一级部门-二级部门等等的，一个下拉框选择联动另一个下拉

川长思鸟来/ 2023年07月25日 09:15/ 0 赞/ 21 阅读

相关 LayUI # 多选下拉框

我的项目中使用的是formSelects-v4.js，但是现在以及对此引用停止更新了。现在提供一下学习网址：[https://hnzzmsf.github.io/examp

迈不过友情╰/ 2023年06月24日 08:10/ 0 赞/ 38 阅读

相关【Layui】Layui下select下拉框不显示或没有效果

今天再用Layui写界面时，发现自己的select下拉框没有显示 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aH

心已赠人/ 2022年11月27日 12:06/ 0 赞/ 358 阅读

相关 layui结合ajax实现下拉菜单联动效果

![11f4800b45bf04c9cc53cb44278cf05e.png][] 大家好好，我是雄雄，欢迎关注公众号：雄雄的小课堂。昨天分享的是使用layui集合spr

ゝ一世哀愁。/ 2022年11月14日 13:18/ 0 赞/ 240 阅读

相关 layui结合ajax实现下拉联动效果

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

墨蓝/ 2022年11月14日 07:55/ 0 赞/ 226 阅读

相关 javascrip实现下拉框联动

实际项目中几个下拉框需要联动是经常需要实现的功能. 一般的实现方法是定义几个多维数组,利用数组的下标找到与上个下拉框的关系实现下拉框的联动. 不妨定义几个js的数据对

忘是亡心i/ 2022年09月18日 09:47/ 0 赞/ 204 阅读

相关 layui——下拉框监听

<select name="" id="userSelect" lay-filter="userClass"> <option value="0">用户

迷南。/ 2022年05月12日 13:34/ 0 赞/ 414 阅读

相关 layui的下拉搜索框

html部分通过给select设定属性 lay-search 来开启搜索匹配功能，给select父级layui-form的类名，一定要搭配使用才能显示 <div c

小灰灰/ 2022年03月28日 09:37/ 1 赞/ 1657 阅读

相关如何通过jQuery实现select下拉框的联动效果

由于项目需要，小编需要实现三个HTML的select下拉框联动的效果，如果考虑到实际用户体验的话，直接用异步刷新的方式操作DOM是最好的选择，这里小编直接使用了

àì夳堔傛蜴生んèń/ 2021年09月14日 11:40/ 0 赞/ 828 阅读

相关 JavaScript 下拉框联动案例

功能描述页面上有两个下拉框，左边显示国家，右边显示城市，左边发生变化的时候，右边下拉选择内容同时发生变化，实现联动效果。 ![在这里插入图片描述][watermar

小灰灰/ 2021年06月24日 16:10/ 0 赞/ 544 阅读