Para seleccionar y deseleccionar múltiples opciones en un menú desplegable, utilizaremos los códigos HTML y CSS. El código HTML ayuda a definir la estructura básica de la página web y CSS se beneficiará en el diseño de la página web.
Algunas propiedades esenciales utilizadas en el código son las siguientes:
- <div> : esta es una etiqueta de división que nos ayuda a definir una sección particular del código HTML a la que se hará referencia y se puede editar fácilmente más adelante en la hoja de estilo CSS.
- <link rel=”stylesheet” href=”> – Esta etiqueta contiene el enlace a la hoja de estilo CSS creada por nosotros y hereda todas las modificaciones de la hoja de estilo que queremos realizar en nuestra página web.
- container-fluid : esta clase proporciona un contenedor de ancho completo que se extiende a través del sitio web.
- <div class=”row”> : este es un sistema de cuadrícula de arranque y nos ayuda a llenar hasta 12 filas en una página.
- mul-select : esta clase nos permite elegir entre las diversas opciones que aparecen en el menú desplegable.
Enfoque: Este es un código HTML simple para mostrar un menú desplegable en un sitio web donde podemos seleccionar múltiples opciones de estructuras de datos y deseleccionar otras usando la opción de selección múltiple.
Usaremos Bootstrap aquí para usar el sistema de cuadrícula sensible y el control de formularios de Bootstrap . A continuación se muestra el código para incluir el enlace CDN de Bootstrap en la sección principal del código HTML.
<enlace rel=”hoja de estilo” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css”>
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<!-- These are the jQuery extensions taken from
bootstrap website to enable the drop down
function of the menu bar -->
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css">
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js">
</script>
<!-- Default bootstrap CSS link taken from the
bootstrap website-->
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js">
</script>
<style>
*{
margin: 0; padding: 0; box-sizing: border-box;
}
body{
justify-content: center;
align-items: center;
min-height: 100%;
}
.form{
margin: 2% 20%;
}
.mul-select {
min-width: 100%;
}
h1 {
color: #fff;
}
</style>
</head>
<body>
<div class="container-fluid bg-dark" style="min-height: 50vh;">
<div class="text-center">
<h1 class="pt-4" style="color: #29c94f;">GeeksforGeeks</h1>
<h1 class="py-4">Select Multiple Options</h1>
</div>
<!-- These modifications are done to make the webpage
adaptive to the screen size and automatically
reduce the size when screen is minimized -->
<div class="row justify-content-center align-items-center">
<div class="col-lg-6 col-md-6 col-12">
<div class="form-group form">
<!-- Various options in drop down menu to
select the types of data structures
that we need -->
<select class="mul-select" multiple="true">
<option value="Stack">Stack</option>
<option value="Queue">Queue</option>
<option value="Linked-List">Linked-List</option>
<option value="Heap">Heap</option>
<option value="Binary-Tree">Binary-Tree</option>
<option value="Graph">Graph</option>
<option value="Array">Array</option>
</select>
</div>
</div>
</div>
</div>
<!-- JavaScript code to enable the drop down function -->
<script>
$(document).ready(function() {
$(".mul-select").select2({
placeholder: "select data-structures",
tags: true,
});
})
</script>
</body>
</html>
En el código HTML también hemos incluido algunos códigos JavaScript porque, en una página web, tenemos que usar JavaScript para realizar cualquier tipo de función.
Como podemos ver al abrir el archivo en un navegador, este es el resultado obtenido y estamos obteniendo la barra desplegable deseada
Esto demuestra que podemos seleccionar varias opciones a la vez con solo hacer clic en ellas. Aparte de eso, también podemos observar que todas las opciones que se eligen se han sombreado en gris.
Para deseleccionar las opciones seleccionadas, simplemente podemos hacer clic en el botón de cruz cerca del texto y la opción se deseleccionará automáticamente y también se eliminará el tono gris en el menú desplegable. El siguiente gif de salida demuestra lo mismo:
Fuente para descargar las extensiones Bootstrap, CSS y JavaScript: https://getbootstrap.com/docs/4.5/getting-started/introduction/
HTML es la base de las páginas web y se utiliza para el desarrollo de páginas web mediante la estructuración de sitios web y aplicaciones web. Puede aprender HTML desde cero siguiendo este tutorial de HTML y ejemplos de HTML .
CSS es la base de las páginas web y se utiliza para el desarrollo de páginas web mediante el diseño de sitios web y aplicaciones web. Puede aprender CSS desde cero siguiendo este tutorial de CSS y ejemplos de CSS .
jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es ampliamente famosa por su filosofía de «Escribir menos, hacer más».
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .
Publicación traducida automáticamente
Artículo escrito por debanshupanda2001 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA