layui下拉框联动查询效果

前言

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

解决方案

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

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>

初始化一级部门

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)!!}");//渲染selectform.render('select');} else {layer.msg("加载列表失败");}}});
}
//直接初始化一级部门
initDepartmentFirstLevel();

设置一级部门联动二级部门效果。

form.on('select(departmentFirstLevel)', function(data){//根据一级部门联动二级部门initDepartmentSecondaryLevel();
});

二级部门联动逻辑，核心就是传入选择的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)!!}");//渲染selectform.render('select');} else {layer.msg("加载列表失败");}}});
}
//如果二级部门数量较少，可以考虑直接初始化（当然， 建议不要）。
//initDepartmentSecondaryLevel()

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

swing下拉框从mysql_Java Swing应用程序 JComboBox下拉框联动查询
在web项目中,通过下拉框.JQuery和ajax可以实现下拉框联动查询. 譬如说,当你查询某个地方时,页面上有:省份: 市区: 县乡: 街道: 查询譬如说,你选择了省:江苏省,那么在市区中只会显示 ...
java下拉框查询_Java Swing应用程序 JComboBox下拉框联动查询
在web项目中,通过下拉框.JQuery和ajax可以实现下拉框联动查询. 譬如说,当你查询某个地方时,页面上有:省份: 市区: 县乡: 街道: 查询譬如说,你选择了省:江苏省,那么在市区中只会显示 ...
layui下拉框联动
定义下拉框: <div class="layui-input-inline layui-form" lay-filter="prov"><se ...
级联查询ajax,Jquery+Ajax下拉框级联查询
Jquery代码 $(function(){ //提交事件 $("#ImageButton1").click(function(){ //省Id var provinceId=$( ...
layui 下拉框空选项不显示_layui下select下拉框不显示或没有效果
Layui会对select.checkbox.radio等原始元素隐藏,从而进行美化修饰处理.但这需要依赖于form组件,所以你必须加载 form,并且执行一个实例.值得注意的是:导航的Hover效果 ...
高级查询组件下拉框联动（三）
实现下拉框联动例子. 1.首先在ul中定义省份和城市查询条件. <ul id="dynamicCondition" style="display:none;&quo ...
jquery ajax下拉联动,jQuery Ajax MVC 下拉框联动
无刷新下拉框联动方法: Controllers代码 public JsonResult DH_Change(string DH_ID) { List TeamLeaderList = FinanceD ...
antd 下拉框怎么联动_antd下拉框联动使用步骤详解
这次给大家带来antd下拉框联动使用步骤详解,antd下拉框联动使用的注意事项有哪些,下面就是实战案例,一起来看一下. 先说一下效果要求,上面一个下拉框,下面一个,要求上面选中的时候,下面的内容要跟着 ...
javascript实现下拉条联动_js实现下拉框联动
今天学习了如何用js实现下拉框的联动,下拉框联动主要指的是当一个下拉框的内容改变时另一个下拉框的内容也会相应的发生改变.比如,我么有时在注册时会需要添加籍贯,当我们选择相应的省份之后,后面的市区也会相 ...

layui下拉框联动查询效果

前言

解决方案

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

最新文章

热门文章