如何在没有 jQuery 的情况下设置多个 selectedIndexes？

Question

我见过this question，但我的问题不同，因为另一个问题使用了value 和 jQuery，我都不想使用。

---

举个例子更容易解释：

const select = document.getElementById('sel');
const indexes = new Set([0, 2, 4]);

Array.prototype.forEach.call(select.options, (opt, i) => {
  opt.selected = indexes.has(i);
});

<select id="sel" multiple size=5>
  <option>one</option>
  <option>two</option>
  <option>three</option>
  <option selected>four</option>
  <option>five</option>
</select>

这是设置选定选项one、three 和five 的最有效方法吗？ select.selectedIndex 似乎不接受数组，所以这是我能想到的唯一方法。使用Set 应该比遍历数组更有效，每次都使用.includes。

Answer 1

循环您的索引数组并更新与索引匹配的options。

const select = document.getElementById('sel');
const indexes = [0, 2, 4];
// Clear the default selected
select.selectedIndex = -1;
// Select those indexes you want
for(var idx of indexes){
  select[idx].selected = true
}

<select id="sel" multiple size=5>
  <option>one</option>
  <option>two</option>
  <option>three</option>
  <option selected>four</option>
  <option>five</option>
</select>