Eliminar opciones de select en IE6
-
10-07-2019 - |
Pregunta
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");
});
Solución
¿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);
Otros consejos
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).