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

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

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

Answer 6

这是最短的方式：

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

一行，没有，没有JQuery，简单。

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

尝试

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

或者查看removeChild（）函数。

或者如果您使用jQuery框架。

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

Answer 10

请注意，选择可以同时具有两个 - optgroup＆amp;
- 选项收集
作为它的孩子。

所以，

方法＃1

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

方法＃2

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

我测试过，都在Chrome上工作我喜欢简单的，老式的方法＃1。

Answer 11

PrototypeJS ：

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

Answer 12

如果您使用的是JQuery，并且您的选择控件具有ID＆＃34; DropList＆＃34;您可以这样删除其选项：

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

实际上它适用于我的任何选项列表，比如datalist。

希望它有所帮助。

Answer 13

这可用于清除选项：

function clearDropDown(){
  var select = document.getElementById("DropList"),
      length = select.options.length;
  while(length--){
    select.remove(length);
  }
}

<select id="DropList" >
  <option>option_1</option>
  <option>option_2</option>
  <option>option_3</option>
  <option>option_4</option>
  <option>option_5</option>
</select>
<button onclick="clearDropDown()">clear list</button>

Answer 14

使用JQuery是一个更漂亮，更短的＆amp;更聪明的方法！

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

Answer 15

反过来。原因是每次移除后尺寸减小。

for (i = (len-1); i > -1; i--) {
    document.getElementById("elementId").remove(i);
}

Answer 16

我认为这是最好的解决方案。是

 $("#myselectid").html('');

Answer 17

最简单的解决方案是最好的，所以你只需要：

＆＃13;

var list = document.getElementById('list');
while (list.firstChild) {
    list.removeChild(list.firstChild);
}

＆＃13;

<select id="list">
  <option value="0">0</option>
  <option value="1">1</option>
</select>

＆＃13;

Answer 18

应该反向删除这些项目，否则会导致错误。此外，我不建议只将值设置为null，因为这可能会导致意外行为。

var select = document.getElementById("myselect");
for (var i = select.options.length - 1 ; i >= 0 ; i--)
    select.remove(i);

或者，如果您愿意，可以使其成为一种功能：

function clearOptions(id)
{
    var select = document.getElementById(id);
    for (var i = select.options.length - 1 ; i >= 0 ; i--)
        select.remove(i);
}
clearOptions("myselect");

Answer 19

以上答案的代码需要略微更改才能删除完整列表，请检查此段代码。

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

刷新长度，它将从下拉列表中删除所有数据。希望这会对某人有所帮助。

Answer 20

var select = document.getElementById('/*id attribute of your select here*/');
for (var option in select){
    select.remove(option);
}

Answer 21

我想指出的是，原来的问题已经不再与今天有关。而且该解决方案的版本更短：

selectElement.length = 0;

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

Answer 22

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

希望，此代码将为您提供帮助

Answer 23

如果你必须支持IE，并且你的选择列表中有超过100个项目，我强烈建议你考虑用这样的函数替换select：

function clearOptions(select) {
    var selectParentNode = select.parentNode;
    var newSelect = select.cloneNode(false); // Make a shallow copy
    selectParentNode.replaceChild(newSelect, select);
    return newSelect;
}

select参数应该是来自jquery选择器或document.getElementBy调用的元素。唯一的缺点是你丢失了连接到选择的事件，但是当它从函数返回时你可以很容易地重新连接它们。我正在使用一个具有~3k项目的选项，IE9上需要4秒才能清除选择，因此我可以使用新内容更新它。几乎是这样做的。

Answer 24

while(document.getElementById("DropList").childNodes.length>0) 
{
    document.getElementById("DropList").removeChild(document.getElementById("DropList").childNodes[0]);
}

Answer 25

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

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

Answer 26

今天我遇到了同样的问题，我在重新加载选择框时做了如下操作。（在平原JS中）

        var select = document.getElementById("item");
        select.options.length = 0;
        var opt = document.createElement('option');
        opt.value = 0;
        opt.innerHTML = "Select Item ...";
        opt.selected = "selected";
        select.appendChild(opt);


       for (var key in lands) {
            var opt = document.createElement('option');
            opt.value = lands[key].id;
            opt.innerHTML = lands[key].surveyNo;
            select.appendChild(opt);

        }

Answer 27

var select =$('#selectbox').val();

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

27 个答案: