Un select es una lista desplegable de opciones de HTML, se declara usando <select> y dentro de él tiene opciones declaradas con <option>. Cada opción tiene un valor y un texto.

El select de HTML se maneja a través de JavaScript. Al select también se le conoce como lista desplegable, Dropdown list o simplemente select.

Manipular select con JavaScript puro

Hoy veremos cómo trabajar con JavaScript y los elementos de tipo select con option. Vamos a ver cómo:

1. Obtener valor seleccionado de un select
2. Agregar opciones al elemento select
3. Obtener opción seleccionada
4. Limpiar el select
5. Escuchar cuando el valor del select cambia, es decir, que se selecciona otro valor

Está de más mencionar que esto lo haremos con JavaScript puro, sin usar frameworks ni librerías externas.

Al final tendremos un ejemplo en donde manejamos un select con JavaScript, el cual se puede probar en este enlace.

Primero: obtener referencia al elemento

Podemos usar document.getElementById o document.querySelector, yo prefiero la segunda forma pues es más moderna, aunque su soporte no está para navegadores antiguos.

Suponiendo que el select tiene el id “miSelect” podemos obtenerlo así:

document.getElementById("miSelect");

O así:

document.querySelector("#miSelect");

Podemos guardar el resultado en una variable o constante, recomiendo una constante pero eso es cosa de cada desarrollador.

Yo lo haré así:

Estoy prefijando con el signo de dólar para saber que no es un valor normal, sino un elemento.

Agregar option a select con JavaScript

Para agregar una opción a la lista desplegable debemos crear un elemento HTML de tipo option, establecer el text y value para finalmente llamar al método appendChild del select.

Aquí el ejemplo:

El texto y valor pueden obtenerse de cualquier lugar, yo le pongo los milisegundos actuales para que no se repitan, pero es un simple ejemplo. De esta manera podemos agregar opciones al elemento.

Diferencia entre text y value

El texto es lo que ve el usuario, y el valor algo así como el identificador. Ambas cosas pueden ser las mismas, pero depende de tus necesidades.

Por ejemplo, si tenemos una lista de empleados yo pondría el nombre en text, y el id en value, así el usuario vería el nombre pero yo buscaría por id.

Escuchar cuando cambia la opción

Para saber si el usuario elige otra opción o el select cambia de opción agregamos un listener en el evento change del select.

Antes de ello definimos la función que se ejecuta cuando cambie, la cual solo imprime un mensaje.

A continuación veremos cómo obtener el valor seleccionado, también puedes llamar a esa función en el evento que acabamos de ver.

Obtener opción seleccionada de select con JavaScript

El elemento tiene una propiedad llamada selectedIndex, y otra llamada options. La propiedad options es un arreglo de las opciones, y selectedIndex el índice que está seleccionado.

Por lo tanto solo accedemos al arreglo en esa posición. Es importante mencionar que si no hay elementos, selectedIndex estará en -1.

En el ejemplo obtenemos la opción seleccionada, la cual es un objeto que tiene text y value. Lo estoy mostrando en una alerta pero podríamos hacer cualquier otra cosa.

Limpiar select con JavaScript

Ahora veamos la última operación, la cual es limpiar completamente el select. Para eso usamos el método remove en un ciclo. De esta manera quitamos cada elemento.

Es importante hacer el ciclo desde la cantidad de opciones hasta 0, ya que la función remove reordena el arreglo y si lo hacemos desde 0 hasta la cantidad de opciones no funcionará.

Igualmente si solamente quieres quitar un elemento de la lista desplegable llama a remove sin el ciclo, pasándole el índice de la opción.

Poniendo todo junto

Podemos poner la declaración de los elementos, sus listeners y funciones juntas. Queda así:

El código HTML que tiene el select es el siguiente:

Puedes probar el ejemplo aquí.

Conclusión

Sin importar el framework que utilicemos, todo es manejado con JavaScript en los niveles más bajos.

Además, al hacer todo con JavaScript evitamos sobrecargar nuestras páginas con librerías de terceros que hacen las cosas más fáciles pero a su vez más pesadas.