下拉框选择数据—联查

Posted 2020-11-26 zeevy

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

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

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