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

2020/11/05 11:23 · javascript ·  · 0评论

我的代码可在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
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!