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>

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

1 个答案: