下拉框选择数据—联查

Posted zeevy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了下拉框选择数据—联查相关的知识,希望对你有一定的参考价值。

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

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

//后台传给前台的数据位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 }

以上是关于下拉框选择数据—联查的主要内容,如果未能解决你的问题,请参考以下文章

选择框联查 选择1后再选2再选3

js改变下拉框内容

C# winform gridview 代码转为下拉选择框

谁知道怎么用ajax实现选择下拉框的时候动态从数据库读取数据吗

C# winform gridview(注意不是datagridview) 代码转为下拉选择框

如何设置combobox 下拉框的内容