从多个选择框中删除所有选项

Question

如果我尝试用下面的代码从一个多选择框中删除所有的选项，并不是所有的选项都将被删除。

我做错了什么?

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

<select id="category2" name="category_id[]" multiple="multiple" size="10">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>

Answer 1

在找这个吗?

bt_remove.onclick =_=>
{
[...category2.selectedOptions].forEach(opt => opt.remove() );

/*
for just unselect:
[...category2.selectedOptions].forEach(opt => opt.selected = false );
*/
}

<select id="category2" multiple="multiple" size="5">
<option value="1"          >--- 1 ---</option>
<option value="2" selected >--- 2 ---</option>
<option value="3"          >--- 3 ---</option>
<option value="4" selected >--- 4 ---</option>
<option value="5" selected >--- 5 ---</option>
</select>
<br><br>
<button id="bt_remove"> remove selects</button>

Answer 2

问题是，每次运行.remove()时，e.length减少1，但i保持相同高，因此最终它将小于i。

要解决这个问题，只需创建e.length的副本(因此它不会改变)并每次删除e[0]。如果一直删除e[i]，那么i将大于e.length，该元素将不存在:

let e = document.getElementById("category2").options;
const temp = e.length;
for (let i = 0; i < temp; i++) {
e[0].remove();
}

<select id="category2" name="category_id[]" multiple="multiple" size="10">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>

Answer 3

在你的问题中你有一个选择框，你的答案是:

document.querySelectorAll('#category2 option').forEach(opt=>{
opt.remove();
});

如果你有多个选择框，你可以使用

document.querySelectorAll('#category1 option, #category2 option').forEach(opt=>{
opt.remove();
});

或use function

function removeOpt( selector ){
document.querySelectorAll(selector+' option').forEach(opt=>{
opt.remove();
});
}
removeOpt( '#category2' );
removeOpt( '#otherSelectTag' );

Answer 4

可能更快更简单:

document.getElementById("category2").options.length = 0;

<select id="category2" name="category_id[]" multiple="multiple" size="10">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>