替换IE8中大下拉列表的最快方法

Question

我必须管理大的下拉列表(数千项)，并且我在使用IE8时遇到了jQuery .html方法的性能问题。实际上，清空内容需要3-4秒。

你有什么解决办法吗？

代码：

var selectHtml = "";
$(data.items).each(function () {

    var option = "<option value='";
    option += this.Value + "'";

    if (this.Selected) {
        option += " selected";
    }

    option += ">" + this.Text + "</option>";
    selectHtml += option;
});
$(target).html(selectHtml);

.html of jQuery call .empty，在IE分析器中，我可以看到，占用大部分时间的是.empty。

Answer 1

我在这里找到了解决方案：https://stackoverflow.com/a/23552898/1431524

最后我得到了这样的代码：

function clearOptions(select) {
    var selectParentNode = select.parentNode;
    if (selectParentNode) {
        var newSelect = select.cloneNode(false); // Make a shallow copy
        selectParentNode.replaceChild(newSelect, select);
        return newSelect;
    }
    return undefined;
}

function appendSelectHtml(data, target) {
    var selectHtml = [];
    $(data.items).each(function () {
        var selected = this.Selected ? ' selected' : '';
        var option = "<option value='" + this.Value + "'" + selected + ">" + this.Text + "</option>";
        selectHtml.push(option);
    });
    target = $(clearOptions(target[0])); //The item that was contained in the selector isn't in the DOM anymore
    target.append(selectHtml.join(""));       
}

Answer 2

假设你的意思是

<ul id='mylist'>
  <li>Item 1</li>
  .... 
  <li>Item n</li>
</ul>

或等效的select/option语句，您需要：

$('#mylist').empty()

或者，如果您实际上只更改下拉列表中的几个项，也许您应该在data.value和选择列表中的元素之间维护一个映射，因此您只需要添加尚未放在列表中的项，并且对要删除的项有一个简单的引用。

我怀疑你对时间分配的看法是错误的，而且大部分时间都是在构建列表。尝试将所有新选项项推送到数组上，然后在最后执行数组的单个联接。

var list = [];

$(data.items).each(function () {
    var selected = this.Selected ? ' selected' : '';
    var option = "<option value='" + this.Value + "'" + selected + ">" 
                 + this.Text + "</option>";
    list.push( option);
});

$(target).html(list.join( "\n"));