Supprimer des options de select dans IE6

Question

J'essaie de repeupler un menu déroulant. Je passe un appel ajax pour récupérer ma liste. Lorsque j'ai la nouvelle liste, je supprime toutes les options de l'élément select et insère les nouvelles valeurs (environ 100 options). Cela fonctionne très bien sur les versions ultérieures d'IE et de Firefox. le rafraîchissement est presque instantané. Cependant, sur IE6, ces opérations ralentissent vraiment le navigateur. La liste déroulante s'anime presque à mesure que les options lui sont retirées, et cela dure plusieurs secondes. Est-il possible d'accélérer le processus en dehors de la comparaison de l'ancienne liste avec la nouvelle et de la suppression / l'ajout des éléments modifiés?

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

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

Answer 1

Et si vous créez un nouvel élément et le changez?

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

Answer 2

Bien que votre code soit bien meilleur, s'il est trop lent, optez pour la route directe (je l'avais déjà fait avant d'utiliser jQuery, et c'était instantané dans tous les navigateurs, y compris IE6). Supprimez simplement tous les enfants de la sélection en supprimant le code HTML:

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

Et modifiez la boucle afin de créer le code HTML pour chaque option et de l'insérer dans la sélection à l'aide de

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

En fonction des performances, vous pouvez essayer de trouver un compromis entre cette solution et celle de karim79 (c'est-à-dire supprimer les options avec html () et les ajouter à l'aide du tableau au lieu de créer du HTML pur).