Remplir un select2 via un Json, rien de plus simple en quelques lignes :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<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> |
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 :
|
1 2 3 |
$('#idAnimal').select2({ data: locs }); |
Vous souhaitez changer la valeur du select en sélectionnant une valeur, Jquery répond à ce besoin :
|
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) :
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$("#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 } }); }); |
Résultat via CodePen :
https://codepen.io/laurent-zminka/pen/WNojyxN