如何用JavaScript将数组值展示在多选select框的已选高亮区域？

实现说明 #

这个需求可以直接实现，操作逻辑如下：

• 原生多选<select>的已选状态由<option>标签的selected属性控制，你拼接生成option时没有加该属性，所以只会生成选项不会默认选中展示在顶部已选区域。
• 修改option拼接逻辑，给每个需要默认选中的员工option添加selected属性即可，调整后的代码如下：

let staff_assign= '';
// 注意避免map回调参数和外层变量e重名，改为item
e.staff_user.assign.map((item) => {
  staff_assign += `<option value="${item.staff_id}" selected>${item.staff_name}</option>`;
});

• 如果你引入了第三方多选UI组件（比如Select2、Choices.js等），在动态插入option之后需要调用组件的更新触发方法，示例如下：

// Select2组件触发更新示例
$('#getStaff').trigger('change');

• 如果需要后续动态修改已选值，也可以直接给select元素赋值已选id数组：

document.getElementById('getStaff').value = [1,2,3]; // 数组为需要选中的staff_id集合

内容的提问来源于stack exchange，提问作者nonutt