JavaScript如何比对两个数组实现多选下拉框选中状态标记

问题根源 #

现有代码固定取account_selected[0].ID做比对，仅能匹配第一个选中项，无法覆盖全部已选值。同时原代码中option标签重复定义了value属性，属于冗余内容。

实现方案 #

推荐先提取所有已选ID存入集合，遍历全量账号数组时直接判断ID是否在集合中即可，执行效率更高：

// 提取所有已选中的ID存入Set，O(1)复杂度查找
const selectedIdSet = new Set(account_selected.map(item => item.ID))
let temp = ''

$.each(account, function(i, value) {
  const hasSelected = selectedIdSet.has(value.ID)
  temp += `<option ${hasSelected ? 'selected' : ''} value="${value.ID}" id="account_id${value.ID}">${value.nama}</option>`
})

如果需要兼容不支持ES6 Set的旧环境，可以用Array.some()方法实现：

let temp = ''
$.each(account, function(i, value) {
  // 遍历已选数组判断当前ID是否存在
  const hasSelected = account_selected.some(item => item.ID === value.ID)
  temp += `<option ${hasSelected ? 'selected' : ''} value="${value.ID}" id="account_id${value.ID}">${value.nama}</option>`
})

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