JavaScript: cómo obtener el valor de una lista desplegable
Obtener el valor de una selección en HTML es una pregunta bastante recurrente. Aprenda a devolver el valor y el texto de una lista desplegable usando JavaScript puro o jQuery.
Supongamos que tiene el siguiente código:
<select id="language">
<option value="en" selected>English</option>
<option value="es">Español</option>
<option value="pt">Português</option>
</select>Hay dos piezas de información que podemos querer obtener en este caso.
- El valor de la opción seleccionada.
- El texto de la opción seleccionada.
Cómo obtener el valor de una selección con JavaScript
Para obtener el valor de una selección o menú desplegable en HTML usando JavaScript puro, primero obtenemos la etiqueta de selección, en este caso por id, y luego obtenemos el valor seleccionado a través de la propiedad selectedIndex.
var select = document.getElementById('language');
var value = select.options[select.selectedIndex].value;
console.log(value); // enEl valor “en” se imprimirá en la consola (Ctrl + Shift + J para abrir la consola).
Obtener el valor de una selección con jQuery
$('#language').val(); // enCómo obtener el texto de una selección
Para obtener el contenido de una opción, pero no el valor, el código es casi el mismo, simplemente tome la propiedad de texto en lugar de valor.
var select = document.getElementById('language');
var text = select.options[select.selectedIndex].text;
console.log(text); // EnglishEl texto “English” se imprimirá en la consola (Ctrl + Shift + J para abrir la consola).
Obtener el texto de una selección con jQuery
$('#language :selected').text(); // EnglishEjemplo completo
En el siguiente código, cuando cambiamos el valor desplegable, el valor seleccionado y el texto se muestran en un campo de entrada.inglésEspañolportugués
<!DOCTYPE html>
<html>
<body>
<select id="language" onChange="update()">
<option value="en">English</option>
<option value="es">Español</option>
<option value="pt">Português</option>
</select>
<input type="text" id="value">
<input type="text" id="text">
<script type="text/javascript">
function update() {
var select = document.getElementById('language');
var option = select.options[select.selectedIndex];
document.getElementById('value').value = option.value;
document.getElementById('text').value = option.text;
}
update();
</script>
</body>
</html>¿Te ayudo el artículo?
De Junior a Senior es un blog en donde platicaremos sobre las experiencias que hemos tenido como programadores a lo largo de nuestra carrera, además estaremos publicando de forma constante información sobre de temas de programación con los cuales vayamos creciendo juntos.
