Agregar / eliminar elementos dinámicamente en un campo select con jQuery
24 dic
Últimamente estoy recibiendo muchos e-mails de gente con dudas agregando o eliminando elementos dinámicamente en un campo select con jQuery. Es prácticamente igual que como os enseñamos la semana pasada, con la función append() y la función remove()
Os pongo un ejemplo:
$('#campo_select_append').append('<option value="opcion_nueva_1" selected="selected">Opción nueva 1</option>');
El el campo select con nombre / id "#campo_select_append" agregamos la opción con texto ("Opción nueva 1") y valor (value="opcion_nueva_1")
Podemos personalizarlo como todo lo que queramos, como si fuera HTML. Como en este caso, que además lo hemos marcado como seleccionado (selected="selected")
Ahora que ya sabemos como agregar opciones, vamos a ver como podemos eliminarlas.
Para eliminarlas utilizaremos las funciones find() y remove() de jQuery.
Con find() buscamos la opción que queremos eliminar, especificando su valor ("value=""), la seleccionamos y luego con find() la eliminamos.
Os pongo un ejemplo:
$("#campo_select_remove").find("option[value='opcion_1']").remove();
Buscamos dentro del select con nombre / id "#campo_select_remove" la opción con valor (value='opcion_1') y lo eliminamos.
Para terminar os dejamos unos ejemplos interactivos:
Sin comentarios todavía