Javascript 如何清除下拉框中的所有选项？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3364493/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I clear all options in a dropdown box?
提问by Kirt
My code works in IE but breaks in Safari, Firefox, and Opera. (big surprise)
我的代码可以在 IE 中运行，但在 Safari、Firefox 和 Opera 中会中断。（大惊喜）
document.getElementById("DropList").options.length=0;
After searching, I've learned that it's the length=0that it doesn't like.
I've tried ...options=nulland var clear=0; ...length=clearwith the same result.
搜索后，我知道这length=0是它不喜欢的。
我试着...options=null和var clear=0; ...length=clear具有相同的结果。
I am doing this to multiple objects at a time, so I am looking for some lightweight JS code.
我一次对多个对象执行此操作，因此我正在寻找一些轻量级的 JS 代码。
采纳答案by Nick Craver
You can use the following to clear all the elements.
您可以使用以下方法清除所有元素。
var select = document.getElementById("DropList");
var length = select.options.length;
for (i = length-1; i >= 0; i--) {
select.options[i] = null;
}
回答by Fabiano
To remove the options of an HTML element of select, you can utilize the remove()method:
要删除 的 HTML 元素的选项select，您可以使用以下remove()方法：
function removeOptions(selectElement) {
var i, L = selectElement.options.length - 1;
for(i = L; i >= 0; i--) {
selectElement.remove(i);
}
}
// using the function:
removeOptions(document.getElementById('DropList'));
It's important to remove the optionsbackwards; as the remove()method rearranges the optionscollection. This way, it's guaranteed that the element to be removed still exists!
删除options向后很重要；当该remove()方法重新排列options集合时。这样就保证了要移除的元素仍然存在！
回答by Kangkan
If you wish to have a lightweight script, then go for jQuery. In jQuery, the solution for removing all options will be like:
如果您希望拥有一个轻量级脚本，那么请选择 jQuery。在 jQuery 中，删除所有选项的解决方案如下：
$("#droplist").empty();
回答by Dmitry Shintyakov
Probably, not the cleanest solution, but it is definitely simpler than removing one-by-one:
可能不是最干净的解决方案，但绝对比一个一个删除更简单：
document.getElementById("DropList").innerHTML = "";
回答by Rodrigo Longo
This is the best way :
这是最好的方法：
function (comboBox) {
while (comboBox.options.length > 0) {
comboBox.remove(0);
}
}
回答by Firemen26
This is a short way:
这是一个简短的方法：
document.getElementById('mySelect').innerText = null
One line, no for, no JQuery, simple.
一行，没有 for，没有 JQuery，简单。
回答by Julio Garcia
function removeOptions(obj) {
while (obj.options.length) {
obj.remove(0);
}
}
回答by user
I'd like to point out that the problem in the original question is not relevant today anymore. And there is even shorter version of that solution:
我想指出，原始问题中的问题今天不再相关。该解决方案还有更短的版本：
selectElement.length = 0;
I've tested that both versions work in Firefox 52, Chrome 49, Opera 36, Safari 5.1, IE 11, Edge 18, latest versions of Chrome, Firefox, Samsung Internet and UC Browser on Android, Safari on iPhone 6S, Android 4.2.2 stock browser. I think it is safe to conclude that it's absolutely compatible with whatever device there is right now, so I recommend this approach.
我已经测试过这两个版本都可以在 Firefox 52、Chrome 49、Opera 36、Safari 5.1、IE 11、Edge 18、最新版本的 Chrome、Firefox、Samsung Internet 和 Android 上的 UC 浏览器、iPhone 6S 上的 Safari、Android 4.2 中运行。 2 股票浏览器。我认为可以安全地得出结论，它与现在的任何设备都绝对兼容，因此我推荐这种方法。
回答by a_rahmanshah
This is a bit modern and pure JavaScript
这有点现代和纯 JavaScript
document.querySelectorAll('#selectId option').forEach(option => option.remove())
document.querySelectorAll('#selectId option').forEach(option => option.remove())
回答by EpokK
with PrototypeJS:
使用PrototypeJS：
$('yourSelect').select('option').invoke('remove');
