Cómo recuperar el valor seleccionado del menú desplegable JavaScript
En JavaScript, a menudo nos encontramos con páginas web fáciles de usar que incluyen un cuestionario o un formulario para obtener el valor de las opciones seleccionadas individuales o múltiples. Además, al tratar con una página web basada en cuestionarios, queremos notificar al usuario sobre el estado contra la respuesta proporcionada con un valor (correcto, incorrecto). En tales casos, recuperar los valores seleccionados del menú desplegable es muy útil para proporcionar claridad y ahorrar tiempo en el final del usuario.
Este artículo lo guiará para recuperar los valores seleccionados de una lista desplegable en JavaScript.
Cómo obtener/recuperar el valor seleccionado del desplegable en JavaScript?
Para recuperar el valor seleccionado del desplegable en JavaScript, puede usar:
-
- "valor" propiedad.
- "SelectedIndex" propiedad.
Ahora pasaremos por cada uno de los enfoques mencionados uno por uno!
Método 1: Obtenga/recupere el valor seleccionado del desplegable en JavaScript utilizando la propiedad Value
El "valor"La propiedad devuelve el atributo de valor de un campo de texto. Utilizaremos este método para obtener la opción seleccionada de una lista desplegable y mostrará su valor:
Sintaxis
selectElement.valor
Aquí el "valorLa propiedad devolverá el valor particular seleccionado de la lista desplegable.
Pasemos por el siguiente ejemplo para una mejor comprensión del concepto:
Ejemplo
En este ejemplo, especificaremos la identificación llamada "seleccionar”E inserte los valores de opción que se seleccionarán en la lista desplegable. Estos valores de opción se colocarán dentro del ""Etiquetas.
Ahora, incluiremos un botón con un "al hacer clic" evento. Esto funcionará de tal manera que cuando el botón con valor "Verificar opción"Sea presionado, la función"selecciona valor()Se activará:
Seleccione el género de la lista desplegable dada:
El valor del género seleccionado es:
class = "output">
A continuación, declararemos una función llamada "selecciona valor()". Aquí, usaremos el "documento.QuerySelector ()Método para acceder a la ID del menú desplegable creado. Después de eso, obtendremos el valor del género seleccionado de la lista desplegable utilizando el "valor" propiedad. Por último, el "contenido del textoLa propiedad devolverá el contenido de texto del valor seleccionado y lo mostrará:
La salida de la implementación anterior dará como resultado lo siguiente:
Método 2: Recupere el valor seleccionado del desplegable en JavaScript utilizando la propiedad "SelectedIndex"
El "opción"La propiedad devuelve una colección de todos los elementos y el"SelectedIndex"La propiedad devuelve el índice de la opción seleccionada del"opciónPropiedad en una lista desplegable. Usaremos ambos juntos para seleccionar una opción especificada y mostrar el valor de la opción correspondiente accediendo a su índice.
Sintaxis
seleccionar.Opciones [Seleccionar.seleccionadoindex].valor
La sintaxis dada anteriormente ayudará a obtener el valor de la opción Menú desplegable seleccionada utilizando su índice.
Mire el siguiente ejemplo para la demostración:
Ejemplo
Ahora utilizaremos el mismo código HTML dado en el ejemplo anterior y haremos algunos cambios en el código JavaScript. Para hacerlo, definiremos la función "selecciona valor()"Y acceda a la identificación asignada del menú desplegable llamado"seleccionar"Con la ayuda del documento.método QuerySelector (). Después de eso, usaremos el "opción"Propiedad en combinación con otras propiedades, incluyendo"SelectedIndex"Para recuperar el valor de la opción seleccionada.
Por último, el "contenido del textoLa propiedad se utilizará en este método para devolver el contenido de texto del valor seleccionado y mostrar el valor correspondiente:
Producción
Hemos proporcionado los métodos más fáciles para recuperar un valor seleccionado del desplegable en JavaScript.
Conclusión
Para obtener/recuperar el valor seleccionado del desplegable en JavaScript, aplique el "valor"Propiedad para obtener el valor del elemento seleccionado de la lista desplegable y la"opción"Propiedad junto con el"SelectedIndex"Propiedad para obtener el conjunto de opciones y obtener el valor de la opción seleccionada accediendo al índice de la opción particular. Este artículo ha explicado los métodos para obtener/recuperar valores seleccionados del desplegable en JavaScript.