Accueil Blog A propos Contact Connexion
Retour à la liste des articles Lier deux select avec Jquery chained

Lier deux select avec Jquery chained

Olivier Prieur | il y a 4 ans | il y a 7 jours Développement web | 0 | 3676

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

Olivier Prieur

Geek quinqua nivernais fan d'ovalie, de musique, de linuxeries et de Net.
Portfolio : https://www.olivierprieur.fr

Commentaires

En soumettant ce formulaire, j’accepte que ce site conserve mes données personnelles via ce formulaire. Aucune exploitation commerciale ne sera faite des données conservées.

Il n'y a actuellement aucun commentaire pour cet article

A la une

Utiliser TailwindCSS dans un projet Symfony 7

Lire l'article

Symfony 7 avec Docker

Lire l'article

Customiser Easyadmin (2) : avec AssetMapper

Lire l'article

Je recherche un nouveau job !

Lire l'article

Les plus lus

Symfony : barre de recherche dans la sidebar 19385

Lire l'article

Débuter avec Symfony 5 : le fichier .env 11930

Lire l'article

VSCode : 10 raccourcis clavier indispensables (Linux) 11595

Lire l'article

GIT / GITHUB : aide-mémoire pour "les nuls" 10191

Lire l'article