Rimozione delle opzioni dalla selezione in IE6

Question

Sto tentando di ripopolare un menu a discesa. Sto effettuando una chiamata Ajax per recuperare myList. Quando ho il nuovo elenco, rimuovo tutte le opzioni dall'elemento select e inserisco i nuovi valori (circa 100 opzioni). Funziona alla grande con le versioni successive di IE e Firefox; l'aggiornamento è quasi istantaneo. Tuttavia, su IE6, queste operazioni rallentano davvero il browser. La casella a discesa diventa quasi animata man mano che le opzioni vengono rimosse, e questo continua per alcuni secondi. Esiste un modo per accelerarlo al di fuori del confronto tra il vecchio elenco e quello nuovo e la rimozione / aggiunta solo degli elementi che sono stati modificati?

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

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

Answer 1

Che cosa succede se crei un nuovo elemento e lo cambi?

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

Answer 2

Anche se il tuo codice è molto più bello, se è troppo lento, procedi per il percorso diretto (l'ho fatto in passato, prima di utilizzare jQuery, ed è stato istantaneo in tutti i browser, incluso IE6). Rimuovi tutti i bambini dalla selezione rimuovendo il codice HTML:

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

E modifica il ciclo in modo da creare l'html per ogni opzione e inseriscilo nella selezione usando

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

A seconda delle prestazioni, potresti provare una via di mezzo tra questa soluzione e la soluzione di karim79 (es. rimuovi le opzioni con html () e aggiungile usando l'array invece di creare un semplice HTML).