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.
Hoy veremos cómo trabajar con JavaScript y los elementos de tipo select con option. Vamos a ver cómo:
- Obtener valor seleccionado de un select
- Agregar opciones al elemento select
- Obtener opción seleccionada
- Limpiar el select
- 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.
Me sirvió mucho tu explicación, gracias por explicar ocn ambas opciones el problema! 😀
Gracias por sus comentarios. Saludos!
Gracias por tomarse el tiempo de estudiar, escribir y compartir, me fue util hoy esta pagina.
GRACIAS!!
Excelente explicacion… Dios bendiga a Internet y a las personas que enseñan cosas como esta tan particular y relativamente complicada …
Gracias por sus comentarios
Saludos y éxito