javascript - 如何在没有 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

循环索引数组并更新与索引匹配的选项。

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>