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

我的代码可在IE中运行，但在Safari，Firefox和Opera中会中断。（大惊喜）

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

搜索之后，我了解到length=0它是不喜欢的。

我已经尝试过，...options=null并且var clear=0; ...length=clear结果相同。

我一次要对多个对象执行此操作，因此我正在寻找一些轻量级的JS代码。

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

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

要删除的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'));

删除options倒退很重要；该remove()方法重新排列了options集合。这样，可以确保要删除的元素仍然存在！

如果您希望使用轻量级的脚本，请使用jQuery。在jQuery中，删除所有选项的解决方案如下：

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

可能不是最干净的解决方案，但绝对比一一删除更简单：

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

这是最好的方法：

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

这是一个简短的方法：

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

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

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

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个股票浏览器。我认为可以断定它与目前存在的任何设备绝对兼容，因此我建议使用这种方法。

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

这是一个现代的纯JavaScript

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

与PrototypeJS：

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

如果使用的是JQuery，并且选择控件的ID为“ DropList”，则可以通过以下方式删除其选项：

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

实际上，它适用于任何选项列表，例如数据列表。

希望能帮助到你。

请注意，一个选择可以同时具有

-optgroup和-options

集合

作为其子项。

所以，

方法1

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

方法＃2

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

我测试了，两者都可以在Chrome上运行。

我喜欢更简单，更老式的方法＃1。

尝试

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

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

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

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

使用JQuery是更漂亮，更简短和更聪明的方法！

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

这可以用来清除选项：

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>

倒退。原因是每次删除后尺寸都会减小。

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

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

希望这段代码对您有帮助

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

 $（“＃myselectid”）。html（''）;

最简单的解决方案是最好的，因此您只需要：

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

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

物品应反向取出，否则将导致错误。另外，我不建议您简单地将值设置为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");

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

上面答案的代码需要稍作更改才能删除完整列表，请检查这段代码。

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

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

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

如果必须支持IE，并且选择列表中有100多个项目，我强烈建议您考虑使用以下功能替换选择：

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调用的元素。这样做的唯一缺点是，您丢失了已连接到选择的事件，但是当它从函数中返回时，您可以轻松地重新附加它们。我正在使用一个约有3000个项目的选择，并且在IE9上需要4秒钟才能清除选择，因此我可以使用新内容对其进行更新。这样几乎可以立即做到。

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

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

今天，我遇到了同样的问题，重新加载选择框时，我做了如下操作。（在普通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);

        }

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

本文地址：http://javascript.askforanswer.com/ruheqingchuxialakuangzhongdesuoyouxuanxiang.html
文章标签：html-select , javascript
版权声明：本文为原创文章，版权归 javascript 所有，欢迎分享本文，转载请保留出处！

文件下载