Bootstrap Multiselect - Centro Sviluppo Srl

Se ti è mai capitato di dover creare un form per l’insermento di dati, può essere stato necessario utilizzare un elemento select per predeterminare le scelte effettuabili dall’utente. Nel caso in cui la scelta non dovesse essere esclusiva si può aggiungere all’elemento l’attributo multiselect, ma l’aspetto e le funzionalità potrebbero non soddisfare le tue esigenze.

In questo articolo vedremo come utilizzare JQuery e Bootstrap per creare un elemento Bootstrap Multiselect per la selezione di opzioni multiple.

Prima di iniziare …

Per prima cosa dovremo importare le dipendenze nel file html: l’importazione può essere fatta tramite CDN (come nell’esempio riportato), tramite l’utilizzo di una CLI (come npm, yarn, etc…), oppure scaricando i file sorgente e importandoli direttamente.

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
    crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
    integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

Ora importiamo il plugin bootstrap-multiselect, puoi trovare il progetto completo in questo link, di nuovo tramite CDN.

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/1.1.2/js/bootstrap-multiselect.min.js"
    integrity="sha512-lxQ4VnKKW7foGFV6L9zlSe+6QppP9B2t+tMMaV4s4iqAv4iHIyXED7O+fke1VeLNaRdoVkVt8Hw/jmZ+XocsXQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/1.1.2/css/bootstrap-multiselect.min.css"
    integrity="sha512-fZNmykQ6RlCyzGl9he+ScLrlU0LWeaR6MO/Kq9lelfXOw54O63gizFMSD5fVgZvU1YfDIc6mxom5n60qJ1nCrQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />

Inserire l’elemento nella pagina

Ora che disponiamo delle dipendenze necessarie, possiamo utilizzare il nostro multiselect. Di seguito è riportata un esempio di come può essere utilizzato.

<body>
    <main class="container-fluid  p-5">
        <label class="multiselect-label mb-3" for="example">Quali linguaggi ti piacerebbe imparare?</label>
        <select id="example" multiple>
            <optgroup label="Low level">
                <option>C</option>
                <option>C++</option>
                <option>Rust</option>
            </optgroup>
            <optgroup label="High level">
                <option>C#</option>
                <option>Java</option>
            </optgroup>
            <optgroup label="Scripting language">
                <option>Python</option>
                <option>Javascript</option>
            </optgroup>
        </select>
    </main>
</body>

Una volta inserito l’elemento all’interno della DOM è necessario inizializzare il plugin.

<script type="text/javascript">
    $(document).ready(function () {
        $('#example').multiselect();
    });
</script>

Personalizzazione del multiselect

È possibile personalizzare l’elemento passando come parametro alla funzione multiselect() un oggetto che contenga le personalizzazioni desiderate. Di seguito è riportato un esempio di come può essere personalizzato, puoi trovare la lista completa delle opzioni e del loro funzionamento in questo link.

<script type="text/javascript">
    $(document).ready(function () {
        $('#example').multiselect({
            // Personalizzazione del testo
            buttonText: function (options, select) {
                console.log(select);

                if (options.length === 0) {
                    return 'Nessuna selezione';
                }

                else return `${options.length} selezionat${options.length === 1 ? 'a' : 'e'}`;
            },
            selectAllText: 'Seleziona tutto',
            filterPlaceholder: 'Cerca ...',
            // Seleziona tutte le opzioni
            includeSelectAllOption: true,
            // Collapse dei gruppi
            enableCollapsibleOptGroups: true,
            // Filtro di ricerca
            enableFiltering: true,
            // Limite dell'altezza massima
            maxHeight: 300
        });
    });
</script>

Il nostro multiselect è finalmente pronto e possiamo personalizzarlo ulteriormente con l’utilizzo di Css, di seguito un esempio.

<style>
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');

    * {
        font-family: 'Poppins';
        font-size: 18px;
    }

    body {
        background-color: #313131;
    }

    .multiselect-label {
        position: relative;
        display: block;
        color: #eee;
    }

    .multiselect-search {
        margin-left: -.7rem !important;
    }

    .dropdown-toggle,
    .dropdown-menu {
        width: 25ch;
    }
</style>

Contenuti

Prima di iniziare …

Inserire l’elemento nella pagina

Personalizzazione del multiselect

Risultato finale