En este artículo, aprenderemos cómo detectar si una lista desplegable o un elemento de selección HTML es de selección múltiple o no usa jQuery. Hay un enfoque principal con el que esto se puede implementar.
Enfoque: Usar el método prop() en la biblioteca jQuery. Hay un elemento de selección con una identificación de menú desplegable definida en el siguiente ejemplo que también tiene un atributo de múltiple adjunto. Además, se crea un elemento de botón con una clase de verificación de selección múltiple que, al hacer clic, verifica si el menú desplegable dado es de selección múltiple o no. Usamos el método prop() para verificar la existencia de múltiples atributos sin pasar por alto el mismo como un parámetro de string. Si el método devuelve el valor booleano verdadero,entonces la lista desplegable es una selección múltiple. De lo contrario, la lista desplegable no es una selección múltiple ya que el método devuelve el booleano falso que indica la ausencia de múltiples atributos.
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Basic inline styling -->
<style>
body {
text-align: center;
}
p {
font-size: 25px;
font-weight: bold;
}
select {
display: block;
margin: 0 auto;
}
button {
margin-top: 1rem;
cursor: pointer;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<p>jQuery - Detect if a dropdown is a multi-select</p>
<select id="dropdown" multiple>
<option value="Geek 1">Geek 1</option>
<option value="Geek 2">Geek 2</option>
<option value="Geek 3">Geek 3</option>
<option value="Geek 4">Geek 4</option>
</select>
<button class="check-multi-select">
Click me to check if dropdown is a multi-select
</button>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script type="text/javascript">
$(".check-multi-select").click(function () {
if ($("#dropdown").prop("multiple")) {
alert(
"The given dropdown IS a multi-select"
);
} else {
alert(
"The given dropdown IS NOT a multi-select"
);
}
});
</script>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo es bastante similar al ejemplo anterior, pero la única diferencia es que el menú desplegable no se define como una selección múltiple, lo que significa que no tiene múltiples atributos adjuntos. Por lo tanto, el mensaje de alerta indica que la lista desplegable dada no es una selección múltiple.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Basic inline styling -->
<style>
body {
text-align: center;
}
p {
font-size: 25px;
font-weight: bold;
}
select {
display: block;
margin: 0 auto;
}
button {
margin-top: 5rem;
cursor: pointer;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<p>jQuery - Detect if a dropdown is a multi-select</p>
<select id="dropdown">
<option value="Geek 1">Geek 1</option>
<option value="Geek 2">Geek 2</option>
<option value="Geek 3">Geek 3</option>
<option value="Geek 4">Geek 4</option>
</select>
<button class="check-multi-select">
Click me to check if dropdown is a multi-select
</button>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script type="text/javascript">
$(".check-multi-select").click(function () {
if ($("#dropdown").prop("multiple")) {
alert(
"The given dropdown IS a multi-select"
);
} else {
alert(
"The given dropdown IS NOT a multi-select"
);
}
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por rajatsandhu2001 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA