从IE6中选择删除选项

问题描述：

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

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

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

您可以尝试在更改它之间隐藏控件，以确保它不会尝试呈现更改。 – NibblyPig 2009-11-30 17:19:33

顺便说一句，你可以用$（'mySelect'）替换$（'＃mySelect'）。children（）。remove（）。 – 2009-11-30 17:24:49

答

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

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

听起来像它应该工作，这将是馅饼简单。我会回报。 :) – Chris 2009-11-30 17:29:48

这加速了几秒钟，并修复了“动画”删除。 IE6仍然有点慢，但这似乎是最好的解决方案。谢谢！ – Chris 2009-11-30 17:43:37

答

虽然你的代码是好得多，如果它的速度太慢，去直接路由（我已经做到了，在过去，使用jQuery之前，它在所有的浏览器是即时，包括IE6）。只是删除所有来自选择孩子通过删除HTML：

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

所以您创建每个选项的HTML修正环路，并通过使用

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

将其插入选择根据性能的不同，你可以在这个解决方案和karim79的解决方案之间尝试一个中间立场（即，使用html（）去除选项，并使用数组追加它们而不是创建纯HTML）。

我也喜欢这个想法，因为你不必吹走选择元素。 .html（''）修复了children.remove（）问题。 – Chris 2009-11-30 17:53:43

这解决了我的性能问题，IE8中的$（“＃myListBox”）。empty（）花费了3秒钟的时间来清除Firefox耗时30毫秒的列表框。公平地说，有超过2500个项目，但这并不能解释性能差异的数量级。 – Nick 2010-05-24 16:27:54

从IE6中选择删除选项

相关推荐