En esta ocasión usaremos la librería select2 para crear un campo select con la posibilidad de seleccionar múltiples valores de una manera rápida y sencilla.
Cabe aclarar que no es necesario agregar las clases de Bootstrap para que el código funcione
Selección múltiple sin select2
Solo con HTML podemos crear un campo select de selección múltiple, pero el campo sé mostrar más grande.
Cuando se especifica múltiple, la mayoría de los navegadores mostrarán un cuadro de lista de desplazamiento en lugar de un menú desplegable de una sola línea.
See the Pen Selección múltiple con select by Alam (@alamdtech) on CodePen.
Selección múltiple con select2
Agregamos el HTML del ejemplo anterior, pero agregamos la clase “basic-multiple” al campo select.
<div class="p-5">
<label>Selección múltiple </label>
<select class="form-control basic-multiple" name="select" multiple>
<option value="">Selecciona una opción</option>
<option value="1">Opción 1</option>
<option value="2">Opción 2</option>
<option value="3">Opción 3</option>
</select>
</div>
Agregando select2
Necesitamos agregar los CDNs o bien puedes descargar los archivos en tu proyecto, en la documentación se muestran las diferentes maneras de hacerlo. Actualmente, yo estoy usando esta versión.
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js" defer></script>
Usando este pequeño código agregamos la funcionalidad al campo select. Como puedes observar estamos usando la clase que se agregó al campo y después agregas la función select2().
$(document).ready(function () {
$('.basic-multiple').select2();
});
Resultado
Al final queda de esta manera.
See the Pen Untitled by Alam (@alamdtech) on CodePen.
Esta librería presenta una amplia gama de ventajas. Cuenta con una gran variedad de opciones para configurar tus campos, tanto en la parte visual como en la parte funcional. Gracias a su versatilidad y flexibilidad, puedes sobreescribir la apariencia de tus elementos, permitiéndote adaptarlos a tus necesidades específicas de manera sencilla.