如何清除下拉框中的所有选项？

Question

我的代码在IE中工作但在Safari,Firefox和Opera中断.(大惊喜)

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

搜索之后,我了解到length=0它不喜欢它.
我试着...options=null和var clear=0; ...length=clear具有相同的结果.

我一次对多个对象这样做,所以我正在寻找一些轻量级的JS代码.

Answer 1

要删除select html对象的选项,可以使用以下代码:

function removeOptions(selectbox)
{
    var i;
    for(i = selectbox.options.length - 1 ; i >= 0 ; i--)
    {
        selectbox.remove(i);
    }
}
//using the function:
removeOptions(document.getElementById("mySelectObject"));

这适用于所有浏览器.=)

Answer 2

如果你想拥有一个轻量级脚本,那么去jQuery吧.在jQuery中,删除所有选项的解决方案如下:

$("#droplist").empty();

Answer 3

可能不是最干净的解决方案,但它绝对比逐个删除更简单:

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

Answer 4

这是最好的方法:

function (comboBox) {
    while (comboBox.options.length > 0) {                
        comboBox.remove(0);
    }        
}

Answer 5

这是最短的方式:

document.getElementById('mySelect').innerText = null

一行,没有,没有JQuery,简单.

Answer 6

您可以使用以下内容清除所有元素.注意

var select = document.getElementById("DropList");
var length = select.options.length;
for (i = 0; i < length; i++) {
  select.options[i] = null;
}

Answer 7

function removeOptions(obj) {
    while (obj.options.length) {
        obj.remove(0);
    }
}

Answer 8

这是一个现代和纯粹的JavaScript

document.querySelectorAll('#selectId option').forEach(option => option.remove())

Answer 9

使用PrototypeJS:

$('yourSelect').select('option').invoke('remove');

Answer 10

如果您使用的是JQuery并且您的select控件具有ID"DropList",则可以通过以下方式删除其选项:

$('#DropList option').remove();

实际上它适用于我的任何选项列表,如datalist.

希望能帮助到你.

Answer 11

请注意,select可以将
- optgroup&
- 选项集合
作为其子项.

所以,

方法#1

var selectElement = document.getElementById('myselectid');
selectElement.innerHTML = '';

方法#2

var selectElement = document.getElementById('myselectid');
selectElement.textContent = '';

我测试过,都在Chrome上运行.
我喜欢简单的,老式的方法#1.

Answer 12

我想指出的是，原来问题中的问题已不再适用。该解决方案甚至有更短的版本：

selectElement.length = 0;

我已经测试过这两个版本都可以在Firefox 52，Chrome 49，Opera 36，Safari 5.1，IE 11，Edge 18，Android上的最新版本的Chrome，Firefox，Samsung Internet和UC浏览器，iPhone 6S上的Safari，Android 4.2上运行。 2个股票浏览器。我认为可以断定它与目前存在的任何设备绝对兼容，因此我建议使用这种方法。

Answer 13

尝试

document.getElementsByTagName("Option").length=0

或者也许看一下removeChild（）函数。

或者，如果您使用jQuery框架。

$("DropList Option").each(function(){$(this).remove();});

Answer 14

使用 JQuery 是一种更漂亮、更短、更智能的方法！

$('#selection_box_id').empty();

Answer 15

对于 Vanilla JavaScript，有一种简单而优雅的方法可以做到这一点：

for(var o of document.querySelectorAll('#DropList > option')) {
  o.remove()
}