Actualmente con html tu puedes crear listas desplegables y seleccionar múltiples elementos presionando simultáneamente la tecla CTRL y dando clic en cada uno de los elementos a seleccionar. Esto puede ser complicado para la gente que visita tu sitio web y eso no es lo que la gente quiere. Por ese motivo escribo este artículo, en lugar de utilizar una caja de selección tan inútil, nosotros implementaremos un plugin de jQuery para hacer esto más sencillo. El ejemplo lo puedes descargar aquí.
El plugin es jQuery Multiple Select, sigue los siguientes pasos para implementar la selección múltiple fácilmente y en cuestión de segundos.
1. Instalar el plugin Multiple Select Plugin
Multiple Select es un plugin de jQuery muy útil que te permite seleccionar múltiples elementos con casillas de verificación en lugar de presionar simultáneamente CTRL y seleccionar las opciones en la selección predeterminada. Para usar este complemento en tu proyecto, necesitarás 3 archivos, el JavaScript, la hoja de estilo predeterminada y una imagen que contenga la flecha desplegable. Puede descargar esos archivos desde el repositorio en Github e incluir una copia local en tu proyecto.
<!-- Using a local copy --> <!-- Include the default stylesheet --> <link rel="stylesheet" type="text/css" href="multiple-select.css"> <!-- Include plugin --> <script src="multiple-select.js"></script> <!-- Or using a CDN --> <!-- Include the default stylesheet --> <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/wenzhixin/multiple-select/e14b36de/multiple-select.css"> <!-- Include plugin --> <script src="https://cdn.rawgit.com/wenzhixin/multiple-select/e14b36de/multiple-select.js"></script>
2. Inicializar y usar el plugin
Para inicializar el complemento, es necesario un elemento de selección con el atributo selección múltiple activada, no necesitas agregar marcas especiales u otras cosas innecesarias, simplemente incluye el complemento e inicialízalo en el elemento:
<!-- A multiple select element -->
<select id="my-select" multiple="multiple">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<script>
// Initialize multiple select on your regular select
$("#my-select").multipleSelect({
filter: true
});
</script>
3. Ejemplo completo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demos</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link rel="stylesheet" href="multiple-select.css" />
</head>
<body>
<div class="container">
<div class="form-group">
<label>Month</label>
<select id="ms" multiple="multiple" class="form-control">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="multiple-select.js"></script>
<script>
$(function() {
$('#ms').change(function() {
console.log($(this).val());
}).multipleSelect({
width: '100%'
});
});
</script>
</body>
</html>
