原生JS如何正确重置支持多选的<select>元素？现有方案多选时失效原因？

• 你代码里用到的selectedOptions是实时动态的HTMLCollection集合，集合的内容和长度会随DOM状态变化即时更新。
  当你选中3个选项触发重置时，遍历过程如下：

初始集合长度为3，i=0时取消第一个元素的选中状态，该元素会立刻从集合中移除，集合长度变为2，原集合索引1、2的元素自动前移到索引0、1的位置。
接下来i自增为1，此时你操作的是更新后集合索引1的元素（对应原集合的第三个元素），取消选中后集合长度变为1。
i继续自增为2，此时i已经大于等于当前集合长度1，循环直接终止，剩下的原集合第二个元素没有被处理，就会保留选中状态。

方案1：倒序遍历动态集合 #

从集合末尾向前遍历，不会受元素移除导致的索引变化影响：

function resetS() {
    const selectedOptions = document.getElementById('s').selectedOptions;
    for (let i = selectedOptions.length - 1; i >= 0; i--) {
        selectedOptions[i].selected = false;
    }
}

方案2：转为静态数组后遍历 #

用Array.from把动态集合转为普通静态数组，遍历过程中长度固定：

function resetS() {
    const selectedOptions = Array.from(document.getElementById('s').selectedOptions);
    for (let i = 0; i < selectedOptions.length; i++) {
        selectedOptions[i].selected = false;
    }
}

方案3：最简实现，直接设置selectedIndex #

多选select直接将selectedIndex设为-1即可清空所有选中项，无需遍历：

function resetS() {
    document.getElementById('s').selectedIndex = -1;
}

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