从 IE6 中的选择中删除选项答案

【问题标题】：Removing options from select in IE6从 IE6 中的选择中删除选项
【发布时间】：2010-12-21 17:23:27
【问题描述】：

我正在尝试重新填充下拉菜单。我正在进行 ajax 调用以检索 myList。当我有了新列表时，我从选择元素中删除所有选项并插入新值（大约 100 个选项）。这适用于更高版本的 IE 和 Firefox；刷新几乎是即时的。但是，在 IE6 上，这些操作确实会降低浏览器的速度。随着选项被从中删除，下拉框几乎变成了动画，并且持续了几秒钟。除了将旧列表与新列表进行比较并且仅删除/添加已更改的项目之外，还有什么方法可以加快速度？

$("#myselect").children.remove();

$.each(myList, function(i, val) {
   $("<option>").attr("value", val.myID)
                .text(val.myText)
                .appendTo("#myselect");
});

【问题讨论】：

您可以尝试在更改控件之间隐藏控件，以确保它不会尝试呈现更改。
顺便说一句，您可以将 $('#mySelect').children().remove() 替换为 $('mySelect').empty();

标签： jquery select internet-explorer-6 drop-down-menu option

【解决方案1】：

如果您创建一个新元素并将其切换出来怎么办？

var newSelect = $("<select></select>");
$.each(myList, function(i, val) {
    $("<option>").attr("value", val.myID)
                 .text(val.myText)
                 .appendTo(newSelect);
});
$("#myselect").replaceWith(newSelect);

【讨论】：

听起来应该可以，而且很简单。我会回来报告的。 :)
这会加快几秒钟的速度并修复“动画”删除。 IE6 还是有点慢，但这似乎是最好的解决方案。谢谢！

【解决方案2】：

虽然您的代码要好得多，但如果它太慢，请使用直接路由（我过去做过，在使用 jQuery 之前，它在所有浏览器中都是即时的，包括 IE6）。只需通过删除 html 从选择中删除所有子项：

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

并修改循环，以便为每个选项创建 html，并将其插入到 select 中使用

$('#myselect').html(optionsHTML);

根据性能，您可以在此解决方案和 karim79 的解决方案之间尝试中间立场（即，使用 html() 删除选项，并使用数组附加它们，而不是创建纯 HTML）。

【讨论】：

我也喜欢这个想法，因为您不必吹走选择元素。 .html('') 也修复了 children.remove() 问题。
这解决了我的性能问题，即 IE8 中的 $("#myListBox").empty() 需要 3 秒以上才能清除 Firefox 需要 30 毫秒的列表框。公平地说，有超过 2500 个项目，但这并不能解释性能上的数量级差异。