¿Cuál es el mejor método para añadir opciones a un <select>
de un objeto JavaScript usando jQuery?
I'm buscando algo que don't necesita un plugin para hacer, pero también estaría interesado en los plugins que están ahí fuera.
Esto es lo que hice:
selectValues = { "1": "test 1", "2": "test 2" };
for (key in selectValues) {
if (typeof (selectValues[key] == 'string') {
$('#mySelect').append('<option value="' + key + '">' + selectValues[key] + '</option>');
}
}
Una solución limpia/simple:
Esta es una [versión de matdumsa's] limpiada y simplificada1:
$.each(selectValues, function(key, value) {
$('#mySelect')
.append($('<option>', { value : key })
.text(value));
});
Cambios desde matdumsa's: (1) se ha eliminado la etiqueta close para la opción dentro de append() y (2) se han movido las propiedades/atributos a un mapa como segundo parámetro de append().
Si no tiene que soportar versiones antiguas de IE, usar el constructor Option
](https://developer.mozilla.org/en-US/docs/Web/API/HTMLOptionElement/Option) es claramente el camino a seguir, una solución legible y eficiente:
$(new Option('myText', 'val')).appendTo('#mySelect');
Es equivalente en funcionalidad a, pero más limpio que:
$("<option></option>").attr("value", "val").text("myText")).appendTo('#mySelect');
He hecho algo así, cargar un elemento desplegable vía Ajax. La respuesta anterior también es aceptable, pero siempre es bueno tener la menor modificación del DOM como sea posible para un mejor rendimiento.
Así que en lugar de añadir cada elemento dentro de un bucle es mejor recoger los elementos dentro de un bucle y añadirlo una vez que se haya completado.
$(data).each(function(){
... Collect items
})
Añádelo,
$('#select_id').append(items);
o incluso mejor
$('#select_id').html(items);