Obtenga el valor de la opción seleccionada de la lista desplegable en JavaScript
En JavaScript, trabajar con o realizar un seguimiento de las interacciones del usuario, como los clics del mouse o las pulsaciones de teclas del teclado, es un desafío. Gracias a los eventos de JavaScript, es más fácil para nosotros realizar un seguimiento de las interacciones del usuario y obtener los valores actualizados después de que los usuarios de la página web realicen algunos cambios.
Por ejemplo, si hay un menú desplegable y tiene que seleccionar una opción de la lista de todas las demás opciones, esto es lo que sucedería: puede obtener fácilmente el valor de la opción que ha seleccionado en el menú desplegable. lista con la ayuda de eventos de “clic” del mouse.
Verá cómo implementar esto en detalle al leer este artículo.
Obtener la opción seleccionada de una lista usando eventos de mouse en JavaScript
Los eventos en JavaScript son una excelente manera de realizar un seguimiento de las interacciones del usuario en la página web, como los clics del mouse o los eventos de clic del teclado. Hay varios eventos disponibles en JavaScript, una lista completa de los cuales se puede encontrar aquí. De todos estos eventos, solo nos enfocaremos en discutir el evento de clic del mouse.
Siempre que los usuarios hagan clic en cualquiera de las opciones presentes dentro de la lista desplegable, se activará nuestro evento de clic del mouse. Con esta función, podemos obtener fácilmente el valor de la opción seleccionada en el menú desplegable.
Veamos ahora cómo funciona durante la ejecución.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<select id="list">
<option class="drop-down">test1</option>
<option class="drop-down" selected="selected">test2</option>
<option class="drop-down">test3</option>
</select>
<script src="./script.js"></script>
</body>
</html>
El siguiente es el código JavaScript.
function myFunction() {
let elem = document.querySelectorAll('.drop-down');
elem.forEach(element => {
element.addEventListener('click', e => {
console.log(e.target.innerHTML);
});
})
}
myFunction();
Producción :
test2
test3
test1
Tenga en cuenta que la salida variará según la opción que haya seleccionado el usuario en el menú desplegable.
Dentro de nuestro HTML, tenemos una etiqueta select con un id de list, que se utilizará para crear una lista desplegable. En este caso, hay tres opciones dentro de la etiqueta select, cada una de las cuales tiene un nombre de clase drop-down. Y al final, estamos vinculando el código JavaScript al final de la etiqueta body ya que está presente en un archivo separado.
Dentro de JavaScript, tenemos una función llamada myFunction(). Aquí, primero obtenemos todos los elementos de opción de la lista desplegable utilizando el nombre de clase drop-down utilizando la propiedad querySelectorAll. Este proceso devolverá un array que contiene todas las opciones de la lista desplegable. Luego, almacenaremos esta matriz dentro de una variable llamada elem.
Ahora que tenemos todas las opciones almacenadas en la variable elem, usaremos un bucle for each en esa variable. el bucle for each nos ayudará a obtener los elementos individuales del array, por lo que ahora podemos agregar detectores de eventos a cada uno de estos elementos de opción del array.
Se puede acceder a los elementos individuales dentro del array con la variable element, que se pasa como argumento al bucle for each. Para agregar un evento a element, tenemos que usar un método proporcionado por JavaScript llamado addEventListener(), que toma dos argumentos.
El primer argumento es el evento click y el segundo argumento es la función callback. El evento click le dice al navegador que ejecute la función callback solo cuando un usuario hace clic (botón izquierdo del mouse) en cualquiera de las opciones del menú desplegable. La función callback en sí misma toma un argumento llamado e o evento que nos ayudará a obtener el elemento que seleccione el usuario.
En la función callback, puede escribir el código que desee. Como queremos obtener el valor de la opción seleccionada en este caso, usaremos e.target. Este comando le dirá qué elemento HTML se está seleccionando actualmente.
Finalmente, para obtener el valor de esa opción seleccionada, podemos usar e.target.innerHTML y pasar esto dentro del método console.log() para ver el resultado en la ventana de la consola.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn