Question

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

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

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

Answer 1

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

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

Answer 2

虽然你的代码更好，但是如果它太慢了，那就选择直接路由（我以前在使用jQuery之前完成了它，并且它在所有浏览器中都是即时的，包括IE6）。只需删除html：

即可从select中删除所有子项

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

修改循环，以便为每个选项创建html，并使用

将其插入到选择中

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

根据性能的不同，你可以尝试在这个解决方案和karim79的解决方案之间找到一个中间点（即用html（）删除选项，然后使用数组附加它们而不是创建纯HTML）。

从IE6中的select中删除选项

2 个答案: