Aprenda a convertir sus selecciones múltiples típicas en un impresionante menú desplegable filtrable con casillas de verificación utilizando un complemento jQuery de código abierto.

Implementación de una selección múltiple filtrable con casillas de verificación utilizando jQuery Plugin Multiselect

Las selecciones múltiples típicas en el navegador de alguna manera no son lo que una persona quiere usar fácilmente. Para seleccionar varios elementos en una selección múltiple, deberá presionar simultáneamente CTRL o los otros elementos seleccionados se deseleccionarán. ¡Eso no es lo que la gente quiere, queridos desarrolladores de navegadores! En lugar de un cuadro de selección tan inútil:

Default Multiple Select DOM Control

Lo que la gente realmente quiere es algo como esto:

jQuery Multiple Select Plugin

Y gracias al complemento jQuery Multiple Select, podrá implementar dicha selección fácilmente y en cuestión de segundos, cambiando esas horribles selecciones múltiples predeterminadas con las nuevas y geniales. En este artículo, le mostraremos cómo implementar este complemento en su proyecto web.

1. Descargar el complemento de selección múltiple

Multiple Select es un complemento jQuery muy útil que le permite seleccionar múltiples elementos con casillas de verificación en lugar de presionar simultáneamente CTRL y seleccionar opciones en la selección predeterminada. Para usar este complemento en su proyecto, necesitará 3 archivos, el núcleo de JavaScript , la hoja de estilo predeterminada y una imagen que contiene la flecha desplegable . Puede descargar esos archivos del repositorio en Github e incluir una copia local en su proyecto o usar un CDN (tenga en cuenta que esta no es la versión minificada y el proyecto no ofrece esto, por lo que deberá minificar el código usted mismo ):

Nota

Como se trata de un complemento de jQuery, obviamente necesitará cargar jQuery antes del complemento.

<!-- Usando una copia local -->

<!-- Incluir la hoja de estilo predeterminada -->
<link rel="stylesheet" type="text/css" href="multiple-select.css">
<!-- Include plugin -->
<script src="multiple-select.js"></script>

<!-- O usando un CDN -->

<!-- Incluir la hoja de estilo predeterminada -->
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/wenzhixin/multiple-select/e14b36de/multiple-select.css">
<!-- Incluir complemento -->
<script src="https://cdn.rawgit.com/wenzhixin/multiple-select/e14b36de/multiple-select.js"></script>

Para obtener más información sobre este complemento, visite el repositorio oficial en Github o el sitio web oficial aquí .

2. Inicialización y uso del complemento

Para inicializar el complemento, obviamente necesitará un componente de selección listo para usar con el atributo múltiple habilitado, no necesitará agregar marcado especial u otras cosas innecesarias, solo incluya el complemento e inicialícelo en su 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>
    // Inicializar selección múltiple en su selección regular
    $("#my-select").multipleSelect({
        filter: true
    });
</script>

El complemento ofrece una página bien documentada con todas las opciones y eventos disponibles para el complemento aquí . Puede ver una demostración en vivo del complemento en este violín . Multiple Selected tiene licencia de The MIT License, lo que significa que es completamente gratuito, puede usar y modificar arbitrariamente este complemento.

Que te diviertas ❤️!


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores