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

IT技术 javascript html-select
2021-01-15 05:19:11

我的代码可以在 IE 中运行,但在 Safari、Firefox 和 Opera 中会中断。(大惊喜)

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

搜索后,我知道length=0它不喜欢它。
我试着...options=nullvar clear=0; ...length=clear具有相同的结果。

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

6个回答

要删除 的 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集合时。这样就保证了要移除的元素仍然存在!

为@Fabiano 欢呼,这实际上删除了项目而不是其他建议。
2021-03-20 05:19:11
简单的代码是 while(selectEl.options.length) selectEl.options.remove(0)
2021-03-21 05:19:11
添加 selectbox.options.length = 0; 最后定义可能会使其在所有浏览器中都完美无缺。
2021-03-24 05:19:11
是的,它会失败,因为 remove() 方法会重新排列数组。向后执行将保证要删除的元素将存在。
2021-04-07 05:19:11
这里的关键是我认为的 selectbox.options 的向后遍历......当我尝试向前遍历时,这个解决方案失败了
2021-04-11 05:19:11

如果您希望拥有一个轻量级脚本,那么请选择 jQuery。在 jQuery 中,删除所有选项的解决方案如下:

$("#droplist").empty();
这取决于上下文。在 Web 应用程序中,$("#droplist").empty();与数千行普通 JS 相比,一百行类型代码的可读性使其非常值得添加 jQuery。如果我们谈论的是一个简单网页的标记/化妆品,那么您 100% 是正确的。
2021-03-20 05:19:11
@AdamIngmansson 够公平的!但我认为您知道 JQ min.js 文件的使用频率如此之高,它经常出现在浏览器的缓存中。在某种程度上,可能有一个很好的论据可以说“始终使用 JQ 并将不使用它视为优化阶段的一部分,如果这确实被证明是必要的”。在某些情况下(手机应用程序等),它可能确实被证明是必要的……这超出了我微不足道的 JS 知识。
2021-03-21 05:19:11
我认为,当for (a in select.options) { select.options.remove(0); }工作正常时,添加 jQuery 的行为与“轻量级”相反
2021-03-27 05:19:11
@AdamIngmansson 当人们诋毁 JQuery 的使用时,我觉得很困惑。我会使用这样的方法,假设 JQ 背后的工程师已经完成了各种测试,以找到执行给定(实用程序)任务的最佳、最快和最重要的最可靠方法。JQ(或任何好的库)的重点是承担平凡的任务,以便您可以专注于有趣的事情。
2021-03-27 05:19:11
@mikerodent 我毫不怀疑该功能本身具有一流的质量和性能。但是为那个小功能加载一个 86kb(3.2.1 版的压缩库)文件并不是“轻量级”的 :) 当然,如果您使用了许多其他功能,那么使用 jQuery 是值得的。这是一个非常好的图书馆
2021-04-02 05:19:11

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

document.getElementById("DropList").innerHTML = "";
我通常避免像瘟疫一样的innertHTML。但这让事情变得如此简单以至于我真的很喜欢它。
2021-03-28 05:19:11
我无法让这个工作。不知道为什么不以这种方式清除选择选项。
2021-03-29 05:19:11
@MikaelL,如果您添加它发生在哪个浏览器中,它会很有用。如果您还记得的话,还有它的版本。
2021-04-11 05:19:11

这是最好的方法:

function (comboBox) {
    while (comboBox.options.length > 0) {                
        comboBox.remove(0);
    }        
}
稍微短一点 while (comboBox.options.length) comboBox.remove(0);
2021-03-19 05:19:11
这救了我今天,因为 'for() { selectbox.remove()}' 机制不知何故没有清除所有选项。谢谢。
2021-03-27 05:19:11

您可以使用以下方法清除所有元素。

var select = document.getElementById("DropList");
var length = select.options.length;
for (i = length-1; i >= 0; i--) {
  select.options[i] = null;
}
这似乎是一个坏主意 - 将项目设置为 null 与删除它们不同。
2021-03-17 05:19:11
检查其他答案以获得更好的方法来做到这一点。
2021-03-23 05:19:11
它也没有像预期的那样工作。当我使用该代码时,它会在下拉列表中留下一个对象。
2021-03-25 05:19:11
此代码可能会崩溃。反向运行循环的最安全方法。
2021-04-07 05:19:11
MooTools 也有empty(),所以你会做$("DropList").empty();
2021-04-09 05:19:11