多选Select框选项无法全部移除的问题排查

你这段代码删不干净选项的原因是循环逻辑出了问题：当你删除options集合里的某个选项后，集合的长度会实时缩短，剩下的选项索引会自动往前挪一位。比如初始有5个选项，i=0时删掉索引0的选项，此时集合长度变成4，原来的索引1的选项现在变成了索引0，但循环里i会接着加1变成1，这时候你操作的是新的索引1（也就是原来的索引2），相当于跳过了现在的索引0，最后就会剩下一半的选项。

给你几个可行的解决方法：

• 倒序循环删除：从最后一个选项开始删，这样前面的选项索引不会因为删除操作而打乱

var e = document.getElementById("category2").options;
for (var i = e.length - 1; i >= 0; i--) {
  e[i].remove();
}

• 直接清空innerHTML：最简单高效的方式，直接清空选择框的内容

document.getElementById("category2").innerHTML = "";

• 循环删除索引0的选项：只要还有选项，就删第一个，直到清空

var select = document.getElementById("category2");
while (select.options.length > 0) {
  select.remove(0);
}

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