Cómo obtener el valor seleccionado de una lista desplegable en JavaScript: análisis completo

Basta de adivinar: cómo obtener el valor seleccionado de un dropdown en JavaScript

¿Alguna vez te has encontrado con una situación en la que el usuario selecciona algo en una lista desplegable de un sitio web, pero tu programa no puede "verlo"? ¿Te suena familiar, verdad? Esta es una de las preguntas más frecuentes en Stack Overflow (¡y con razón!), que hacen miles de desarrolladores principiantes e incluso experimentados. Parece sencillo, ¿no? Pero hay matices, y hoy los analizaremos de una vez por todas.

En este artículo te mostraré no uno, sino varios métodos para obtener el valor seleccionado de un dropdown en JavaScript puro. Aprenderás la diferencia entre value y selectedIndex, cómo manejar el evento de selección y cómo no caer en la trampa de la selección múltiple. ¡Allá vamos!

La forma más sencilla: la propiedad value

Imagina que tienes un select HTML normal:

<select id="city">\n  <option value="moscow">Moscú</option>\n  <option value="spb">San Petersburgo</option>\n  <option value="kazan">Kazán</option>\n</select>

Para obtener el valor seleccionado, solo necesitamos hacer dos cosas:

\n
1. Encontrar el elemento <select> en el DOM.
\n
2. Leer su propiedad value.
\n

Así es como se ve en el código:

const selectElement = document.getElementById('city');\nconst selectedValue = selectElement.value;\n\nconsole.log(selectedValue); // Mostrará, por ejemplo, "spb"

¡Importante! La propiedad value del elemento <select> devuelve automáticamente el atributo value de la <option> actualmente seleccionada. Esta es la forma más simple y recomendada si necesitas el valor, no el texto.

¿Y si necesito obtener el texto del elemento seleccionado?

A veces necesitamos no el valor, sino lo que ve el usuario (por ejemplo, "Moscú" en lugar de "moscow"). Para eso, existe la propiedad textContent (o innerText) de la opción seleccionada. Pero primero debemos obtener la opción en sí:

const selectElement = document.getElementById('city');\nconst selectedOption = selectElement.options[selectElement.selectedIndex];\nconst selectedText = selectedOption.textContent;\n\nconsole.log(selectedText); // Mostrará "Moscú"

Aquí usamos selectedIndex — el índice del elemento seleccionado (comenzando desde 0). Luego accedemos a la colección options y tomamos el elemento correspondiente.

¿Cómo reaccionar al cambio de selección en tiempo real?

Obtener el valor una sola vez está bien, pero la mayoría de las veces necesitamos hacer algo cuando el usuario cambia la selección. Para eso, usamos el evento change:

const selectElement = document.getElementById('city');\n\nselectElement.addEventListener('change', function() {\n  const selectedValue = selectElement.value;\n  const selectedText = selectElement.options[selectElement.selectedIndex].textContent;\n  \n  console.log('Valor seleccionado:', selectedValue);\n  console.log('Texto seleccionado:', selectedText);\n});

Ahora, cada vez que el usuario cambia la ciudad en la lista desplegable, obtenemos los datos actualizados al instante. Práctico, ¿verdad?

Caso especial: selecciones múltiples (multiple select)

¿Y si tienes una lista desplegable con selección múltiple? Por ejemplo:

<select id="skills" multiple>\n  <option value="html">HTML</option>\n  <option value="css">CSS</option>\n  <option value="js">JavaScript</option>\n</select>

En este caso, selectElement.value devolverá solo el primer valor seleccionado, no todos. Para obtener todos los elementos seleccionados, debemos recorrer la colección options:

const selectElement = document.getEl