Entfernen von Optionen aus Auswahl in IE6

Question

Ich versuche, ein Dropdown-Menü wieder zu bevölkern. Ich mache einen Ajax-Aufruf myList abzurufen. Wenn ich die neue Liste, entferne ich alle Optionen aus dem select-Elemente und legen Sie die neuen Werte (etwa 100 Optionen). Dies funktioniert gut auf neuere Versionen von IE und Firefox; die Refresh ist fast sofort. Doch auf IE6, diese Operationen verlangsamen den Browser wirklich nach unten. Die Drop-Down-Box wird fast als Optionen animiert wird von ihm entfernt, und das gilt für einige Sekunden auf. Gibt es eine Möglichkeit, dies zu beschleunigen außerhalb der alten Liste auf den neuen zu vergleichen und nur das Entfernen / Hinzufügen der Elemente, die sich geändert haben?

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

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

Answer 1

Was ist, wenn Sie ein neues Element erstellen und schalten Sie es aus?

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

Answer 2

Auch wenn Ihr Code viel schöner ist, wenn es zu langsam ist, gehen Sie für die direkte Route (ich habe es in der Vergangenheit getan, bevor jQuery verwenden, und es war sofort in allen Browsern, einschließlich IE6). Entfernen Sie einfach alle Kinder aus der Auswahl durch die HTML-Entfernung:

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

Und die Schleife ändern, so dass Sie die HTML für jede Option erstellen, und es in die Auswahl einfügen, indem Sie mit

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

Je nach Leistung, könnten Sie einen Mittelweg zwischen dieser Lösung und karim79 Lösung versuchen (dh. Entfernen Sie die Optionen mit html () und hängen Sie sie das Array anstelle einfaches HTML zu erstellen).