下拉框选择数据—联查

在页面中的分组下拉列表中选择的一条分组数据,在后面人员框中显示该分组下的所有人员(注意人员有多个,用户可以选择任意多个人员)

由于分组人员数据较少,所以在第一次查询时已经查询出所有分组下的所有人员信息,前台根据下拉框筛选具体的人员,代码为:

//后台传给前台的数据位String格式
str ="group1:user1,user2,user3;group2:user1,user2,user3;"
//前台将str转成map格式
var map = {};
var str = "${str}";
var members = str.split(";");
for (i = 0; i < members.length; i++) {
    var data = members[i].split(":");
    map[data[0]] = data[1];
 }

1. 首先监听下拉框,js代码为:

1 //groupName是通过lay-filter="groupName"筛选的
2 var form = layui.form, layer = layui.layer;
3 form.on(‘select(groupName)‘, function(data){
4     //获取当前select选中的value值
5      var value = $("#groupName").val();
6      changeUsers(value);
7 });

注意!项目中select选择框使用onchange事件不起作用,原因未知,因此使用layui的select选择框的监听事件
2. changeUsers方法为填充数据,js代码为:

 1 function changeUsers(value){
 2     var strs= new Array();
 3     //获得当前人员信息,转化成数组格式
 4     var array = map[value].split(",");
 5     //每次改变分组时清空id为users的div下的所有结点
 6     $("#users").empty();
 7     for (var i = 0; i < array.length; i++) {
 8         //在id为users的div下添加复选框
 9         $("#users").append("<input type=‘checkbox‘ id=‘user‘ value =‘"+array[i]+"‘ title=‘"+array[i]+"‘ name=‘users‘>");
10     }
11     //renderForm为添加后刷新页面,不然显示不出来复选框
12     renderForm();
13 }
14
15 function renderForm(){
16       layui.use(‘form‘, function(){
17        var form = layui.form;//高版本建议把括号去掉,有的低版本,需要加()
18        form.render();
19       });
20 }

原文地址:https://www.cnblogs.com/zeevy/p/12118414.html

时间: 2024-10-09 09:01:21

下拉框选择数据—联查的相关文章

.NET MVC中给下拉框填充数据

在MVC 中绑定模型的视图,很多时候都会用到下拉框,所以在此记录一下根据DataTable中的数据给下拉框填充数据的方法 1 /// <summary> 2 /// 将 DataTable 转成下拉框的填充数据List<SelectListItem>类型 3 /// </summary> 4 /// <param name="dt">数据DataTable</param> 5 /// <param name="

分类编码下拉框选择自动带出分类名称

<asp:TableCell> <ig:WebDropDown runat ="server" ID="txtClassNo" Width ="200" OnSelectionChanged="webDropdownOnchange" EnableClosingDropDownOnSelect="true" AutoPostBack="true" ></ig

Excel导出下拉框引用数据

namespace WebInfo { public partial class Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { HSSFWorkbook workbook = new HSSFWorkbook();    HSSFSheet realSheet = (HSSFSheet)workbook.CreateSheet("Sheet xls"); HSS

jQuery实现下拉框选择图片的功能

让下拉框中显示图片,并可选择对应图片,让select下拉框不仅可显示文字,还可以显示图片内容.为了更生动些,这里还加入了jQuery动画效果,当展开Select列表的时候,图片渐变显示.使用了一个jQ插件:imageselect.js,使用效果的朋友可以自己下载吧. <!DOCTYPE html> <head> <title>支持图片选择的jQuery列表框插件imageselect.js</title> <script type="text

下拉框选择blur与click冲突问题

缘由:今天在做下拉框选择时,遇到click和blur冲突问题:具体现象如下 1.intput框获取焦点(focus事件)时显示隐藏的下拉框,失去焦点(blur事件)则隐藏下拉框 2.点击选择(click事件)下拉框内容时获取值,然后intput失去焦点(blur事件)隐藏下拉框 3.发现click事件无效,blur事件会优先于click事件执行,导致click事件无效 解决:使用mousedown替换click使点击选择事件优先执行 mousedown事件:当鼠标指针移动到元素上方,并按下鼠标按

easyui 绑定下拉框,下拉框选择改变事件的触发方法

//①定义下拉框 //离线公司[个人或公司] 下拉框 var tmpComOrPer = { type: 'combobox', options: { onSelect:function(data) { ComOrPerChange(false); }, editable:false, panelHeight: 'auto', valueField: 'Type', textField: 'label', data: [ { label: '@BaseRes.OSP_CTL_087', Type

easy ui 下拉框绑定数据select控件

easy ui 中的下拉框控件叫做select,具体代码如下: html代码:①.这是一个公司等级的下拉框 <tr> <td>公司等级:</td> <td> <select id="CompanyDegree" style="width: 150px;"> </select></td> <td>上级或同级:</td> <td> <input

easy ui 下拉级联效果 ,下拉框绑定数据select控件

html代码: ①两个下拉框,一个是省,另一个市 <tr> <td>省:</td> <td> <select id="ProvinceId" style="width: 150px;"> </select></td> <td>市:</td> <td> <select id="LocationId" style="

js动态获取下拉框的数据(搜索条件之间互相影响)

前提:在开发的过程当中,我们常常会遇到这种问题:某个查询列表的查询条件之间互相影响,比如现在有两个搜索条件(下拉),一个需要显示小组名称,另一个是根据这个小组名称查找到对应的小组内人员.那么该如何实现呢? 原理:我们暂且将这三个下拉列表起名为A,B,C. 他们之间的依赖关系是:B的值随着A的变化而变化,C的值随着A,B的变化而变化.我们要做的就是: 1. 进入页面的时候只为A赋值,将B和C都清空. 2. 每次点击A的时候就将B和C的下拉框中的内容先清空再给B赋值. 3. 每次点击B的时候,将C的