A medida que aprende a crear formularios web, una de las tareas más habituales es obtener valores de los men√∫s desplegables. En este artìculo, aprenderemos còmo obtener dichos valores con JavaScript.
Repasemos rápidamente còmo crear un elemento desplegable utilizando HTML. Siga mi Codepen si se pierde.
Para construir nuestro elemento desplegable, necesitamos usar la etiqueta select y usar la opciòn ni√±os anidados debajo de ella. El elemento de selecciòn crea el men√∫ desplegable y con las etiquetas de opciòn definimos aquellas opciones que vivirán el men√∫ desplegable.
Creemos un men√∫ desplegable de nuestras frutas favoritas (que tienen emojis).
Agregamos un h2 vacìo que completaremos con JavaScript más adelante. En este punto, puede elegir su fruta favorita:
Observe la importancia de la propiedad de valor . Esta propiedad nos proporciona datos no estilizados que podemos jugar fácilmente con JavaScript. Por otro lado, el texto dentro de la etiqueta de opciòn puede ser prácticamente cualquier cosa, por lo que no es confiable. La propiedad de valor es lo que es importante aquì.
Seleccionar y mostrar valores desplegables con JavaScript
En primer lugar, debemos seleccionar nuestro men√∫ desplegable de frutas utilizando getElementById en la etiqueta de selecciòn.
Ahora que nuestro men√∫ desplegable está seleccionado, podemos obtener el valor de la opciòn actualmente seleccionada. Esta es la primera opciòn por defecto. Intentemos que:
