jQuery添加許多選項，以殺死鉻chrome

我想添加約500選項使用jQuery的選擇。它運行500次循環。jQuery添加許多選項，以殺死鉻chrome

for(var i=0; i<ids.length;i++){ 
    $("#selectId').append('<option value="' + value + '">' + label + '</option>'); 
}

在Mozilla Firefox等正常工作（需要3秒左右），但在Goggle Chrome半分鐘後，瀏覽器崩潰。

我把一些日誌，看看有多少需要時間，它與每1ms的循環開始，然後將其增加到〜1秒...

任何建議，以使其更有效率？

來源

2015-04-17 Panos

您真的需要一個下拉菜單中的500個選項嗎？無論如何，你最好在'for'循環中連接一個字符串，然後在循環完成或使用HTML片段後將它附加到選擇元素上 –

搜索工具？我無法將一個下拉菜單中的500個選項概念化。你打算使用不同的界面嗎？ – wahwahwah

將選項建立爲一個字符串（最好是推入數組，然後使用.join（''）），然後使用'$（'＃selectId'）。html（options）'或document.getElementById（'selectId '）.innerHTML = options' – yoavmatchulsky

我看到兩個性能問題與你的循環：

，你要創建一個新的jQuery對象，並在每次迭代中搜索DOM的#selectId
，你操縱DOM，添加一行。

這兩者都會降低性能。請嘗試：

var options = []; 
for (var i = 0; i < ids.length; i++) { 
    // first, populate an array with all the options as strings 
    options.push('<option value="' + value + '">' + label + '</option>'); 
} 
// then, join that array into a string and just .append or .html 
$('#selectId').append(options.join('')); 
// OR 
$('#selectId').html(options.join(''));

來源

2015-04-17 22:19:53 yoavmatchulsky

jQuery添加許多選項，以殺死鉻chrome

回答

相關問題