Suppression des options de select dans IE6

Question

Je tente de repeupler un menu déroulant. Je fais un appel ajax pour récupérer myList. Lorsque j'ai la nouvelle liste, je supprime toutes les options de l'élément select et j'insère les nouvelles valeurs (environ 100 options). Cela fonctionne très bien sur les versions ultérieures d'IE et Firefox; l'actualisation est presque instantanée. Cependant, sur IE6, ces opérations ralentissent vraiment le navigateur. La liste déroulante devient presque animée lorsque les options sont supprimées, et cela continue pendant plusieurs secondes. Existe-t-il un moyen d'accélérer cela en dehors de la comparaison de l'ancienne liste avec la nouvelle et en supprimant/ajoutant uniquement les éléments qui ont changé?

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

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

Answer 1

Et si vous créiez un nouvel élément et le désactiviez?

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 est beaucoup plus agréable, si elle est trop lent, allez la route directe (je l'ai fait dans le passé, avant d'utiliser jQuery, et il a été instantanée dans tous les navigateurs, y compris IE6). il suffit de retirer tous les enfants de la sélection en supprimant le code html:

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

Et modifier la boucle de sorte que vous créez le code html pour chaque option, et l'insérer dans la sélection à l'aide

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

Selon les performances, vous pouvez essayer un compromis entre cette solution et la solution de karim79 (par exemple, supprimer les options avec html(), et les ajouter en utilisant le tableau au lieu de créer du code HTML).