如何删除select元素下的全部option选项？

Question

1. 描述你的问题

使用for循环，利用removeChild或选择框的remove方法以及将选项设置为null都没办法完全删除所有选项。

1. 贴上相关代码

DOM部分：

<select name="cars" id="cars">
    <option class="benz" value="benz">benz</option>
    <option class="bmw" value="bmw">bmw</option>
    <option class="volvo" value="volvo">volvo</option>
</select>

js部分：

<script>
var selection = document.getElementById("cars");
for (var i = 0; i < selection.options.length; i++) {
    // selection.removeChild(selection.options[i]);
    // selection.remove(i);
    // selection.options[i] = null;
};
</script>

1. 贴上报错信息

没有输出任何报错的信息，无论是for循环上三种代码中的哪一个都会导致select元素下始终有一个bmw的选项。

1. 贴上相关截图

1. 已经尝试过哪些方法仍然没解决（附上相关链接）

Answer 1

试试这样了？

<script>
var selection = document.getElementById("cars");
selection.innerHTML = "";
</script>

Answer 2

直接把它的innerHTML设置成空字符串不就好了？

Answer 3

我擦原来是因为删除第一个选项以后其他选项自动移动一个位置所以循环里面options[i]应当改为options[0]。《JavaScript高级程序设计第二版》中第14章的14.3.3节for循环部分有错误。

不知我分析的是否正确？

Answer 4

var selection = document.getElementById("cars");
selection.options.length=0;

Answer 5

var ops=city.getElementsByTagName("option");
            
            for(var i=ops.length;i>=0;i--){
                city.remove(0);
                
            }

这样就可以了

Answer 6

因为第一次循环执行完之后第一个子节点被删了，select子节点变成两个了，所以第二次删除下标为1的元素其实是第三个元素，第二个删不掉。
每次删下标为0的就可以了。