En este artículo, aprenderemos cómo encontrar todas las opciones seleccionadas de la etiqueta HTML <select> . Esto podría ser necesario en los casos en los que le hayan dado algunos exámenes basados en opciones múltiples en los que necesita elegir la opción correcta para obtener calificaciones. Para lograr lo mismo, primero tenemos que encontrar la opción seleccionada y unirla con la opción correcta. podemos construirlo muy fácilmente con la ayuda de JQuery.
Aquí vamos a ver dos casos:
- Cuando desee obtener el valor de la opción seleccionada de un menú desplegable de selección única.
- Cuando desee obtener los valores de las opciones seleccionadas de un menú desplegable de selección múltiple.
Ejemplo 1: Encuentre una única opción seleccionada de la etiqueta de selección HTML.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
</script>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<h2>How do you find all selected options
of HTML select tag?</h2>
<h3>You are a?</h3>
<select id="animals">
<option value="dog">Dog</option>
<option value="cat">Cat</option>
<option value="lion">Rabbit</option>
<option value="human">Human</option>
</select>
<p>
You have selected:
<span id="selected"></span>
</p>
<p id="correct"></p>
<button id="submit">See result</button>
<script>
$(document).ready(function () {
const ans = "The correct answer is: Human";
let chosen = "Your answer is: ";
$("#submit").click(function () {
const vals =
$("#animals").find(
"option:selected"
).text();
$("#correct").text(ans);
$("#selected").text(vals);
});
});
</script>
</body>
</html>
Producción:
En algunas condiciones, solo necesitamos una sola opción para ser seleccionado como arriba, donde debe seleccionar si es un perro, un gato, un conejo o un humano y, por supuesto, si está leyendo esta publicación, entonces es un humano. Por lo tanto, otras opciones se vuelven insignificantes. En tales condiciones, podemos usar $(“seleccionar”) .find(“opción:seleccionado”) o simplemente $(“opción:seleccionado”) . En ambos métodos, «opción:seleccionado» es imprescindible, lo que nos da la primera opción seleccionada.
Nota: Se sugiere usar $(“seleccionar”) .find(“opción:seleccionado”) porque al usar esto puede seleccionar opciones de una etiqueta de selección específica si hay varias etiquetas de selección.
Ejemplo 2: Obtenga varias opciones seleccionadas de una etiqueta de selección HTML.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
</script>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<h2>How do you find all selected options
of HTML select tag?</h2>
<h3>Programming languages you love</h3>
<select id="languages" multiple="multiple">
<option value="cpp">CPP</option>
<option value="java">Java</option>
<option value="c">C</option>
<option value="js">Javascript</option>
</select>
<button id="submit">Get Selected Values</button>
<script>
$(document).ready(function () {
$("#submit").click(function () {
const opts = $(
"#languages option:selected"
).map(function () {
return this.value;
}).get().join(",");
alert("Selected options are: " + opts);
});
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por himanshusharma11199 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA