标签：原因 string code 清空 input lte check title app
在页面中的分组下拉列表中选择的一条分组数据，在后面人员框中显示该分组下的所有人员（注意人员有多个，用户可以选择任意多个人员）
由于分组人员数据较少，所以在第一次查询时已经查询出所有分组下的所有人员信息，前台根据下拉框筛选具体的人员，代码为：
//后台传给前台的数据位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 }
标签：原因 string code 清空 input lte check title app
原文地址：https://www.cnblogs.com/zeevy/p/12118414.html
