在宜搭平台中,人员组件可以多选,如何yongJS实现把人员多选框人员所在的部门集合输出到一个文本框内?感谢大神回复
假设人员组件的多选框 id 为 user-select
,输出部门集合的文本框 id 为 dept-output
,可以使用以下代码实现:
// 获取人员多选框
let userSelect = document.getElementById('user-select');
// 监听人员多选框变化事件
userSelect.addEventListener('change', function() {
// 获取选中人员的部门集合
let depts = new Set();
let selectedUsers = userSelect.selectedOptions;
for (let i = 0; i < selectedUsers.length; i++) {
let userDept = selectedUsers[i].dataset.dept;
depts.add(userDept);
}
// 将部门集合输出到文本框
let deptOutput = document.getElementById('dept-output');
deptOutput.value = Array.from(depts).join(', ');
});
上述代码中,利用了 Set 数据结构来存储部门集合,使用了 dataset 属性获取数据。在人员多选框变化时,获取选中人员的部门,再利用 Array.from() 和 join() 方法将部门集合转换成逗号分隔的字符串输出到文本框中。
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。