Crear menú desplegable de selección múltiple en jQuery

Habdul Hazeez 15 febrero 2024 jQuery jQuery Dropdown
  1. Crear menú desplegable de selección múltiple usando Select2
  2. Crear menú desplegable de selección múltiple usando Selectize.js
  3. Crear menú desplegable de selección múltiple usando jQuery Multiselect.js
Crear menú desplegable de selección múltiple en jQuery

Este artículo le enseña cómo crear un menú desplegable de selección múltiple en jQuery. Haremos esto usando tres bibliotecas; Select2, Selectize.js y jquery multiselect.js.

Estas bibliotecas tienen diferentes implementaciones, pero lo ayudarán a crear un menú desplegable de selección múltiple.

Crear menú desplegable de selección múltiple usando Select2

Select2 es una biblioteca jQuery que le permite convertir un menú HTML normal <seleccionar> en un menú de selección múltiple. Para comenzar, asegúrese de que su menú <seleccionar> tenga algunos datos en los campos <opción>.

A partir de ahí, incluya Select2 JavaScript y archivos CSS de cdnjs. Es mejor colocar estos archivos junto con jQuery en el elemento <head>.

Luego, en un archivo JavaScript externo o una etiqueta <script>, puede llamar a Select2 en el menú <select>. Después, puede personalizar el menú según sus necesidades.

Por ejemplo, puede cambiar el texto del marcador de posición e incluir un botón borrar. Además, Select2 permite a tu usuario incluir datos que no están en el menú <select>.

En el ejemplo de código a continuación, hemos usado Select2 para personalizar el menú <select>. Además, encontrarás las personalizaciones de las que hablamos en el último párrafo.

Si necesita más personalizaciones, puede consultar su sitio web oficial.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>01-jQuery-multi-select-with-select2</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <!-- Include Select2 js library and its CSS files -->
     <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"></script>
</head>
<body>
    <main>
        <form>
            <label>Select G7 Countries</label>
            <select class="G7-countries" name="g7[]" multiple="multiple" style="width: 50%;">
                <option value="Canada">Canada</option>
                <option value="France">France</option>
                <option value="Germany">Germany</option>
                <option value="Italy">Italy</option>
                <option value="Japan">Japan</option>
                <option value="United Kingdom">United Kingdom</option>
                <option value="United States">United States</option>
            </select>
        </form>
    </main>
    <script>
    	$(document).ready(function() {
            $('.G7-countries').select2({
                placeholder: 'Select G7 countries',
                allowClear: true,
                tags: true // With this, you can add data that are not in the select options
            });
        });
    </script>
</body>
</html>

Producción:

Select2 biblioteca jQuery en acción

Crear menú desplegable de selección múltiple usando Selectize.js

Selectize.js es otra biblioteca que convertirá su menú <select> en un menú desplegable. Al igual que Select2, tiene más personalizaciones.

Esto incluye limitar el número de selecciones y agregar un botón de eliminación. Además, tiene Restaurar en copia de seguridad, por lo que puede presionar Retroceso sin eliminar la opción seleccionada.

El primer ejemplo a continuación muestra cómo cambiar un menú <seleccionar> a un menú desplegable. Además, agregamos una opción para limitar el número de selecciones; pero lo dejamos como comentario.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>02-jQuery-multi-select-with-selectize-js</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

     <!-- Include Selectize JS files and a CSS library here,
          we are using Bootstrap5 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.6/js/standalone/selectize.min.js" integrity="sha512-pgmLgtHvorzxpKra2mmibwH/RDAVMlOuqU98ZjnyZrOZxgAR8hwL8A02hQFWEK25V40/9yPYb/Zc+kyWMplgaA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.6/css/selectize.bootstrap5.min.css" integrity="sha512-w4sRMMxzHUVAyYk5ozDG+OAyOJqWAA+9sySOBWxiltj63A8co6YMESLeucKwQ5Sv7G4wycDPOmlHxkOhPW7LRg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <main>
        <form>
            <label>Select G7 Countries</label>
            <select class="G7-countries" name="g7[]" multiple="multiple" style="width: 50%;">
                <option value="Canada">Canada</option>
                <option value="France">France</option>
                <option value="Germany">Germany</option>
                <option value="Italy">Italy</option>
                <option value="Japan">Japan</option>
                <option value="United Kingdom">United Kingdom</option>
                <option value="United States">United States</option>
            </select>
        </form>
    </main>
    <script>
        $(".G7-countries").selectize({
            // maxItems: 3,
        });
    </script>
</body>
</html>

Producción:

Selectize.js en acción

El siguiente es el resultado cuando habilita la propiedad maxItems en el código anterior. Aquí, lo hemos configurado en tres elementos; como resultado, no puede seleccionar más de tres opciones.

Posteriormente, el menú de selección no volverá a mostrarse.

Selectize.js con limitaciones en la cantidad de selección

Hemos cambiado el HTML en este segundo ejemplo a un solo campo <input>. Con esto, puedes crear un sistema de etiquetado; donde escribe, y está incluido en las opciones seleccionadas.

Además, hemos habilitado los complementos remove_button y restore_on_backspace.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>02-jQuery-multi-select-with-selectize-js</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

     <!-- Include Selectize JS files and a CSS library here,
          we are using Bootstrap5 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.6/js/standalone/selectize.min.js" integrity="sha512-pgmLgtHvorzxpKra2mmibwH/RDAVMlOuqU98ZjnyZrOZxgAR8hwL8A02hQFWEK25V40/9yPYb/Zc+kyWMplgaA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.6/css/selectize.bootstrap5.min.css" integrity="sha512-w4sRMMxzHUVAyYk5ozDG+OAyOJqWAA+9sySOBWxiltj63A8co6YMESLeucKwQ5Sv7G4wycDPOmlHxkOhPW7LRg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <main>
        <form>
            <input id="input-tags" type="text" name="" style="width: 30%;">
        </form>
    </main>
    <script>
        $("#input-for-tags").selectize({
            plugins: ["remove_button", "restore_on_backspace"], // plugins
            delimiter: ",",
            persist: false,
            create: function (input) {
                return {
                    value: input,
                    text: input,
                };
            },
        });
    </script>
</body>
</html>

Producción:

Función de etiquetado Selectize.js

Crear menú desplegable de selección múltiple usando jQuery Multiselect.js

Multiselect.js funciona como Select2 y Selectize.js, pero el menú <select> tiene un aspecto diferente. Además, después de personalizar el menú <seleccionar>, puede habilitar una opción para mantener el orden de selección.

Sin él, Multiselect.js organizará su selección alfabéticamente. Para comenzar, descargue Multiselect.js de su sitio web y haga lo siguiente.

  1. Extraiga el archivo .zip descargado.
  2. Localice la carpeta js y copie jquery.multi-select.js en su directorio de trabajo.
  3. Localice la carpeta css y copie el archivo multi-select.css en su directorio de trabajo.
  4. Localiza la carpeta img y copia switch.png.
  5. Cree una carpeta img en su directorio de trabajo y pegue switch.png.
  6. Vincule los archivos jquery.multi-select.js y multi-select.css a su archivo HTML.

El siguiente ejemplo de código muestra Multiselect.js en acción.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>02-jQuery-multi-select-with-selectize-js</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script src="multi-select-js-and-css/jquery.multi-select.js"></script>
     <link rel="stylesheet" type="text/css" href="multi-select-js-and-css/multi-select.css">
</head>
<body>
    <main>
        <form>
            <label>Select G7 Countries</label>
            <select id="G7-countries" multiple="multiple" style="width: 30%;">
                <option value="Canada">Canada</option>
                <option value="France">France</option>
                <option value="Germany">Germany</option>
                <option value="Italy">Italy</option>
                <option value="Japan">Japan</option>
                <option value="United Kingdom">United Kingdom</option>
                <option value="United States">United States</option>
            </select>
        </form>
    </main>
    <script>
    	$('#G7-countries').multiSelect({
            // keepOrder: true
        });
    </script>
</body>
</html>

Producción:

Multiselect.js en acción

La salida con keepOrder se establece en true.

Multiselect.js con keepOrder establecido en verdadero

¿Disfrutas de nuestros tutoriales? Suscríbete a DelftStack en YouTube para apoyarnos en la creación de más guías en vídeo de alta calidad. Suscríbete
Autor: Habdul Hazeez
Habdul Hazeez avatar Habdul Hazeez avatar

Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.

LinkedIn

Artículo relacionado - jQuery Dropdown