Agregar / eliminar elementos dinámicamente en un campo select con jQuery

Ú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:

• Ejemplos