Cómo implementar la selección múltiple con casillas de verificación en un control select de HTML usando jQuery

Estrada Web Group
Administrador
Cómo implementar la selección múltiple con casillas de verificación en un control select de HTML usando jQuery

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>

 

Compartir artículo:

Más artículos geniales

Cómo reemplazar un subcadena de una cadena de texto en JavaScript

Cómo reemplazar un subcadena de una cadena de texto en JavaScript

Resumen: en este tutorial, aprenderás a reemplazar todas las apariciones de una subcadena en una cadena con JavaScript.

Ver artículo completo
¿Cómo obtener la latitud y longitud en google maps a partir de una dirección?

¿Cómo obtener la latitud y longitud en google maps a partir de una dirección?

Si desea encontrar obtener la latitud y longitud de Google Maps con jquery y javascript. Entonces tienes el lugar correcto. obtener la latitud y la longitud de la dirección utilizando las API de Google Map con jquery y javascript

Ver artículo completo

Manténgase actualizado

Obtenga excelente contenido en su bandeja de entrada todas las semanas.
Solo contenido excelente, no compartimos su correo electrónico con terceros.
Subir al inicio de la pantalla