Customizzare le select in Javascript con Select2

Mattepuffo's logo
Customizzare le select in Javascript con Select2

Customizzare le select in Javascript con Select2

Programmazione, Javascript - AJAX

Select2 viene presentato come un'alternativa a jQuery per customizzare le select in HTML.

In effetti, se vediamo la documentazione, ci accorgiamo che possiamo fare molte cose con questa libreria.

Comunque è richiesto jQuery per funzionare.

Qui sotto vi posto una pagina con alcune select, con diverse funzionalità:

<!DOCTYPE html>
<html>
    <head>
        <title>Select2</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" 
              rel="stylesheet">
        <script src="https://code.jquery.com/jquery-3.3.1.min.js" 
                integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" 
        crossorigin="anonymous"></script>
        <script 
            src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js">
        </script>
        <script>
            $(document).ready(function () {
                var data = [
                    {
                        id: 0,
                        text: 'Roma'
                    },
                    {
                        id: 1,
                        text: 'New Yotk'
                    }
                ];

                $('.js-example-basic-single').select2();
                $('.js-example-basic-multiple').select2();
                $(".js-example-data-array-selected").select2({data: data});
            });
        </script>
    </head>
    <body>
        <select class="js-example-basic-single" name="state">
            <option value="RM">Roma</option>
            <option value="NY">New York</option>
        </select>
        <hr>
        <select class="js-example-basic-multiple" name="states[]" multiple="multiple">
            <option value="RM">Roma</option>
            <option value="NY">New York</option>
        </select>
        <hr>
        <select class="js-example-data-array-selected">
        </select>
    </body>
</html>

Non si esauriscono qui ovviamente; guardatevi la documentazione per tutte la altre possibilità (compresa la possibilità di riempire la lista tramite AJAX).

Enjoy!

Condividi

Commentami!