开发者社区> 问答> 正文

如何利用遍历输出人员多选框的人员所在部门合集

在宜搭平台中,人员组件可以多选,如何yongJS实现把人员多选框人员所在的部门集合输出到一个文本框内?感谢大神回复

展开
收起
1198311404518986 2022-08-31 18:32:19 290 0
1 条回答
写回答
取消 提交回答
  • 假设人员组件的多选框 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() 方法将部门集合转换成逗号分隔的字符串输出到文本框中。

    2023-05-26 11:18:31
    赞同 展开评论 打赏
问答分类:
问答地址:
关联地址:
问答排行榜
最热
最新

相关电子书

更多
研发效能提升 36 计:用「故事地图」拆分和组织需求,促进持续交付与快速迭代 立即下载
从内容分发端谈自动化运维 立即下载
中移苏研-存储产品规划和实践经验分享 立即下载