HOWTO · jQuery

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.

Por Habdul HazeezPublicado 2023-06-21Actualizado 2024-02-15
En esta página

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

Sobre el autor

Habdul Hazeez

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.

Ver el perfil del autor
LinkedIn