Eliminar opciones de select en IE6

Question

Estoy intentando repoblar un menú desplegable. Estoy haciendo una llamada ajax para recuperar myList. Cuando tengo la nueva lista, elimino todas las opciones del elemento seleccionado e inserto los nuevos valores (aproximadamente 100 opciones). Esto funciona muy bien en versiones posteriores de IE y Firefox; La actualización es casi instantánea. Sin embargo, en IE6, estas operaciones realmente ralentizan el navegador. El cuadro desplegable casi se anima cuando se eliminan las opciones, y esto continúa durante varios segundos. ¿Hay alguna forma de acelerar esto además de comparar la lista anterior con la nueva y solo eliminar / agregar los elementos que han cambiado?

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

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

Answer 1

¿Qué sucede si crea un nuevo elemento y lo cambia?

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

Answer 2

Aunque su código es mucho mejor, si es demasiado lento, vaya por la ruta directa (lo he hecho en el pasado, antes de usar jQuery, y fue instantáneo en todos los navegadores, incluido IE6). Simplemente elimine todos los elementos secundarios de la selección eliminando el html:

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

Y modifique el bucle para crear el html para cada opción, e insértelo en la selección usando

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

Dependiendo del rendimiento, puede intentar un punto medio entre esta solución y la solución de karim79 (es decir, eliminar las opciones con html () y agregarlas usando la matriz en lugar de crear HTML simple).