Lier deux select avec Jquery chained
J'ai souhaité, à partir d'une liste de "codes structure", afficher le nom correspondant "automatiquement", de cette façon : 218521 --> Grand salle 2... Mais comment faire avec deux <select> qui puisent qui plus est leurs infos dans la même table ?
A près quelques recherches, j'ai trouvé le plugin Jquery qui s'appelle Chained (https://github.com/tuupola/jquery_chained).
A une époque où Jquery n'a plus la quotte et où il est progressivement "abandonné" (cf Bootstrap 5), je me suis résigné, pauvre mortel, à quand même l'utiliser. Ca m'arrange bien, car je suis une grosse bille en JS.
Il y certainement moyen d'utiliser du JS vanilla pour faire la même chose. Si vous avez une idée, n'hésitez pas à laisser un mot, je suis preneur.
Voici donc mon exemple ci-dessous. J'ai commenté le code.
Issus de la même table, les champs code et nom sont reliés par l'ID.
<html>
../..
<body>
../..
<div class="col-sm-2">
<label for="codestructure">1/ Code structure :</label>
<select id="codestructure" name="codestructure" class="form-control mb-3">
<option value="">---</option>
<?php
// On recherche tous les codes des structure qu'on va afficher dans un <select>
$codes = $db->query('SELECT id, code FROM structures ORDER BY id ASC');
foreach ($codes as $code) {
?>
<option value="<?php echo $code['code']; ?>"><?php echo $code['code']; ?></option>
<?php
}
?>
</select>
</div>
<div class="col-sm-4"> <label for="structure">2/ Structures :</label>
<select id="structure" name="structure" class="form-control mb-3">
<?php
// On recherche tous les noms des structures
// Grace à Jquery chained, cette partie ne s'affichera que si on sélectionne un code préalablement
// ... et tout fonctionne grâce à l'id "structure" ici et l'id "codestructure" pour le select au-dessus
$strucs = $db->query('SELECT id, nom, code FROM structures ORDER BY id ASC');
foreach ($strucs as $struc) {
?>
<option class="<?php echo $struc['code']; ?>" value="<?php echo $struc['nom']; ?>"><?php echo $struc['nom']; ?></option>
<?php
}
?>
</select>
</div>
<!-- Code Jquery qui va "lier" (chained) l'id "structure" à l'id "codestructure" -->
<script type="text/javascript" charset="utf-8">
$(function() {
$("#structure").chained("#codestructure");
});
</script>
<!-- Evidemment, n'oubliez pas d'appeler Jquery (attention aux versions, toutes ne fonctionnent pas), j'ai pris ici la version avec Bootstrap qui fonctionne -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<!-- Enfin, appelez jquery.chained.js -->
<script src="https://www.appelsiini.net/download/jquery.chained.js" type="text/javascript" charset="utf-8"></script>
../..
</body>
</html>
Olivier Prieur
Geek quinqua nivernais fan d'ovalie, de musique, de linuxeries et de Net.
Portfolio : https://www.olivierprieur.fr
Il n'y a actuellement aucun commentaire pour cet article