Aprenderemos cómo lograr el menú desplegable con los siguientes requisitos.
- Lista de casillas de verificación
- búsqueda de autocompletar
- Seleccionar todo/Restablecer (si no seleccionó ninguno, seleccione todo)
- Contar el número de opciones seleccionadas
Estas tareas se realizan mediante Bootstrap , HTML , CSS y jQuery .
Enfoque: implementaremos un menú desplegable de arranque con una lista de casillas de verificación y un cuadro de búsqueda de autocompletar. Cuando marca las casillas de verificación seleccionar todas, las tres casillas de verificación se marcan simultáneamente. El valor de las casillas de verificación y el número de casillas de verificación se muestran en el botón del menú desplegable anterior. Hay un cuadro de búsqueda que estará en el modo de autocompletar y podrá buscar en todos los diferentes lenguajes de programación.
Pasos:
- Escriba todo el código HTML y CSS que se proporciona a continuación.
- Adjunte un detector de eventos al botón desplegable. Cuando hagamos clic en el botón desplegable, se activará el código dentro del cuerpo.
- En el cuerpo del detector de eventos, vamos a marcar todos los botones de verificación si y solo si «seleccionar todo» está marcado para mostrar el valor de la casilla de verificación en el cuadro anterior. Si «seleccionar todo» no está marcado, todas las casillas de verificación están desmarcadas y borran el valor de las casillas de verificación que se presentarán previamente en el cuadro.
- Hay un cuadro de búsqueda de autocompletar que se implementa para buscar todo el lenguaje de programación usando jQuery.
- Antes de implementar jQuery UI, coloque todos los CDN en secuencia; de lo contrario, arrojará un error y su función de búsqueda de autocompletar no funcionará correctamente.
- Puede leer toda la documentación sobre jQuery UI .
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"/>
<script src=
"https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity=
"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity=
"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity=
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous">
</script>
<link rel="stylesheet"
href=
"//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script src=
"https://code.jquery.com/jquery-1.12.4.js">
</script>
<script src=
"https://code.jquery.com/ui/1.12.1/jquery-ui.js">
</script>
<style>
span {
background-color: white;
padding: 8px 20px 5px 10px;
min-height: 25px;
line-height: 24px;
overflow: hidden;
border: 0;
width: 272px;
border: 1px solid green;
padding: 0 3px 2px 0;
display: flex;
width: 50%;
margin-left: 25%;
}
#ourinput {
box-sizing: border-box;
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
border-bottom: 1px solid #ddd;
}
/* The search field when it gets focus/clicked on */
#ourinput:focus {
outline: 3px solid #ddd;
}
.dropdown-menu {
transform: translate3d(5px, 35px, 0px) !important;
}
</style>
<script>
$(function () {
var language = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme",
];
$("#ourinput").autocomplete({
source: language,
});
});
</script>
</head>
<body class="container-fluid">
<h1 style="color: green; text-align: center">
GeeksforGeeks
</h1>
<hr style="border: 2px solid green" />
<span class="justify-content-center d-flex" id="show-text">
Select
</span>
<div style="text-align: center" id="count">
No. of checked item is : 0
</div>
<div style="padding-top: 50px"
class="justify-content-center d-flex">
<div class="dropdown">
<button
class="btn btn-success dropdown-toggle"
type="button"
id="dropdownMenuButton"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu">
<div class="form-check">
<div class="dropdown-header">select all checkbox</div>
<div class="dropdown-item">
<input
class="form-check-input"
type="checkbox"
id="inlineCheckbox0"
value="option2"/>
<label class="form-check-label" for="inlineCheckbox0">
Select all
</label>
</div>
<div class="dropdown-divider"></div>
<div class="dropdown-item">
<input
class="form-check-input"
type="checkbox"
id="inlineCheckbox1"
value="option2"/>
<label class="form-check-label" for="inlineCheckbox1">
Geeks
</label>
</div>
<div class="dropdown-item">
<input
class="form-check-input"
type="checkbox"
id="inlineCheckbox2"
value="option2"/>
<label class="form-check-label" for="inlineCheckbox2">
For
</label>
</div>
<div class="dropdown-item">
<input
class="form-check-input"
type="checkbox"
id="inlineCheckbox3"
value="option2"/>
<label class="form-check-label" for="inlineCheckbox3">
Geeks
</label>
</div>
<div class="dropdown-divider"></div>
<div class="dropdown-header">search language</div>
<div class="dropdown-item">
<div class="ui-widget">
<input type="text" placeholder="Search.." id="ourinput"/>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var i = 0;
$(".dropdown").on("click", function () {
if ($("#inlineCheckbox0").prop("checked")) {
for (var i = 1; i <= 3; i++) {
$("#inlineCheckbox" + i).prop("checked", true);
}
$("#show-text").text("Geeks For Geeks");
$("#count").text("No of Checked item is :" + 3);
} else {
for (var i = 1; i <= 3; i++) {
$("#inlineCheckbox" + i).prop("checked", false);
}
$("#show-text").text("select");
$("#count").text("No of Checked item is :" + 0);
}
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por debadebaduttapanda7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA