Самый быстрый способ заменить большой выпадающий список в 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 из JQuery вызова .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() 

В качестве альтернативы, если вы на самом деле только изменив несколько пунктов в вашем списке , возможно, вам следует сохранить карту между данными. значение и элемент в списке выбора, поэтому вам нужно только добавить элементы, которые еще не были помещены в список, и иметь простую ссылку на элементы для удаления.

Я подозреваю, что вы ошибаетесь в отношении разделения времени и большую часть времени строят список. Попробуйте нажать все ваши новые элементы опции на массив, а затем выполнить одно соединение массива в конце.

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"));