Obtenga el valor seleccionado de la lista desplegable con JavaScript y jQuery
Este artículo le enseñará a obtener un valor de selección utilizando JavaScript y jQuery estándar. Explicaremos dos ejemplos; el primero muestra el enfoque de JavaScript y el segundo ejemplo usa jQuery.
Obtenga el valor seleccionado con Vanilla JavaScript
Una vez que haya definido un elemento <select> en HTML, puede acceder a su valor a través de JavaScript. Eso es porque JavaScript proporciona métodos y funciones que pueden manipular un elemento.
Sin embargo, varían según el elemento. Entonces, para cada elemento <select>, puede acceder a su valor usando lo siguiente:
seleccionarelemento.valor- Propiedad
optionsyselectedIndex
Obtenga el valor seleccionado usando Selectelement.value
El elemento <select> tiene una propiedad value que contiene el valor del elemento seleccionado. Entonces, tenemos algunos países en el elemento <select> en el siguiente código.
Cuando haga clic en el botón HTML, obtendrá el valor de selección. Además, notará que cada <opción> del elemento <seleccionar> tiene una propiedad valor.
Puede optar por eliminar esta propiedad o dejarla. Obtendrás el mismo resultado.
Código:
<head>
<meta charset="utf-8">
<title>Get Selected Value With Vanilla JS</title>
<style>
body {
display: grid;
justify-content: center;
align-items: center;
height: 100vh;
}
</style>
</head>
<body>
<main>
<form>
<label>Pick a food</label>
<select id="select_menu">
<option value="Rice">Rice</option>
<option value="Carrot" selected="selected">Carrot</option>
<option value="Avocado">Avocado</option>
<option value="Banana">Banana</option>
</select>
<button id="submit_button">Get Food Name</button>
</form>
</main>
<script>
let submit_button = document.getElementById("submit_button");
let select_menu = document.getElementById("select_menu")
submit_button.addEventListener("click", function(event) {
// Prevent the submission of the form
event.preventDefault();
var selected_value = "Hooray!, you selected " + select_menu.options[select_menu.selectedIndex].value;
alert(selected_value);
});
</script>
</body>
Producción:
Obtenga el valor seleccionado usando la propiedad opciones y selectedIndex
Acceder a la propiedad <opciones> le da acceso a la propiedad selectedIndex. Esta propiedad representa el elemento actualmente seleccionado.
Además, la propiedad selectedIndex tiene la propiedad value que devuelve el valor seleccionado.
Por ejemplo, tenemos nombres de alimentos en el elemento <select> en el siguiente código. Por lo tanto, puede seleccionar el nombre de un alimento y hacer clic en el botón para obtener su valor.
Código:
<head>
<meta charset="utf-8">
<title>Get Selected Value With Vanilla JS</title>
<style>
body {
display: grid;
justify-content: center;
align-items: center;
height: 100vh;
}
</style>
</head>
<body>
<main>
<form>
<label>Where are you from?</label>
<select id="select_menu">
<option value="Germany">Germany</option>
<option value="Ethiopia" selected="selected">Ethiopia</option>
<option value="Romania">Romania</option>
<option>Madagascar</option>
</select>
<button id="submit_button">Get Country Name</button>
</form>
</main>
<script>
let submit_button = document.getElementById("submit_button");
let select_menu = document.getElementById("select_menu")
submit_button.addEventListener("click", function(event) {
// Prevent the submission of the form
event.preventDefault();
var selected_value = "Hello, you are from: " + select_menu.options[select_menu.selectedIndex].value;
alert(selected_value);
});
</script>
</body>
Producción:
Obtenga el valor seleccionado con jQuery
La biblioteca jQuery simplifica muchas tareas básicas de JavaScript, incluida la obtención de un valor de selección. Mientras tanto, no está obligado a resolver una tarea en jQuery de la misma manera que lo haría en JavaScript estándar.
Entonces, podemos tomar un enfoque diferente. Aún así, obtendremos el valor seleccionado.
El primer cambio es que los elementos <opción> no tienen la propiedad valor. Otro cambio es nuestro enfoque para obtener el elemento seleccionado.
Aquí, usamos jQuery .change() API en el elemento <select>. Esto significa que podemos obtener el valor seleccionado cada vez que lo elegimos.
Código:
<head>
<meta charset="utf-8">
<title>Get Selected Value With jQuery</title>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer">
</script>
<style>
body {
display: grid;
justify-content: center;
align-items: center;
height: 100vh;
}
</style>
</head>
<body>
<main>
<form>
<label>Choose a Language</label>
<select id="programming_language">
<option>Swift</option>
<option>Obective-C</option>
<option>Erlang</option>
<option>COBOL</option>
<option>FORTRAN</option>
</select>
</form>
</main>
<script>
$(document).ready(function () {
$('#programming_language').change(function () {
var programming_language = document.getElementById("programming_language");
var selected_value = programming_language.options[programming_language.selectedIndex].value
alert("You selected " + selected_value);
});
});
</script>
</body>
Producción:
Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.
LinkedIn