Développement web

Lier deux select avec Jquery chained

Lier deux select avec Jquery chained

Posté le 03/12/2020, à 07:13
Mis à jour le 03/12/2020 à 07:20
citizenz7
Auteur : citizenz7

Lectures : 949



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 -->
<!-- Enfin, appelez jquery.chained.js -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://www.appelsiini.net/download/jquery.chained.js" type="text/javascript" charset="utf-8"></script>
../..
</body>
</html>

Commentaires de l'article 1

Vous devez être connecté(e) pour écrire un commentaire.
Pas encore de compte ? Enregistrez-vous gratuitement.
Shadrak

Shadrak
05/12/20 à 07:27

Très utile, merci.