Jquery – Select2 : auto remplissage depuis Json

Remplir un select2 via un Json, rien de plus simple en quelques lignes :

<html>
<head>
    <meta charset="utf-8" />
    <title>JQuery select2 - remplissage auto</title>
    <!-- Jquery -->
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <!-- Select 2 -->
    <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>

    <p>Animal préféré :</p>
    <select id="idAnimal" class="select2"><option value="0">Animal ?</option></select>

</body>
</html>

<script>

    // init Json
    var locs = [];  
    // remplissage JSon, se réalise généralement via Ajax, dans ce cas je le fais en manuel
    item = {};
    item["id"] = 1;
    item["text"] = "Chien";
    locs.push(item);
    item = {};
    item["id"] = 2;
    item["text"] = "Chat";
    locs.push(item);
    // ça nous donne :
    // locs = [{"id":1, "text":"chien"},{"id":2, "text":"chat"}];

    $(document).ready(function () {

        // remplissage du select désiré
        $('#idAnimal').select2({            
            data: $.map(locs, function (a) {
                return {
                    "id": a.id,
                    "text": a.text
                }
            })
        });      
        // style global de tous les select 
        $("select").select2({
            width: '100%',
            allowClear: false,
        })
    });

</script>

<html>

<head>

<title>JQuery select2 - remplissage auto</title>

</head>

<body>

<p>Animal préféré :</p>

<select id="idAnimal" class="select2"><option value="0">Animal ?</option></select>

</body>

</html>

// init Json

var locs = [];

// remplissage JSon, se réalise généralement via Ajax, dans ce cas je le fais en manuel

item = {};

item["id"] = 1;

item["text"] = "Chien";

locs.push(item);

item = {};

item["id"] = 2;

item["text"] = "Chat";

locs.push(item);

// ça nous donne :

// locs = [{"id":1, "text":"chien"},{"id":2, "text":"chat"}];

$(document).ready(function () {

// remplissage du select désiré

$('#idAnimal').select2({

data: $.map(locs, function (a) {

return {

"id": a.id,

"text": a.text

}

})

});

// style global de tous les select

$("select").select2({

width: '100%',

allowClear: false,

})

});

</script>

Bien entendu il faut en entête appeler jquery et la bibliothèque de Select2 :

https://select2.org/getting-started/installation
https://code.jquery.com/

Astuces select2

Select2 est prédéfini avec les valeurs id et text, si vous créez votre Json avec ces deux identifiants on peut simplifier le remplissage du select par :

$('#idAnimal').select2({            
   data: locs
});

$('#idAnimal').select2({

data: locs

});

Vous souhaitez changer la valeur du select en sélectionnant une valeur, Jquery répond à ce besoin :

// change select id
$("#idAnimal").val(1).change();

1 2	// change select id $("#idAnimal").val(1).change();

Vous souhaitez récupérez la valeur du select en automatique sur changement du select (j’ai utilisé .each si vous avez un Json complexe et souhaitez retrouver des informations complémentaires) :

$("#idAnimal").on("change", function () {

   var idClicked = this.value; // retrieve Id selected

   $.each(locs, function (i, v) {
      if (v.id == idClicked) {
         var textClicked = locs[i].text;
         console.log(textClicked); // display text
         return false; // stops the loop
      }
   });
});