27 sept. 2023 | Connexion

Blog

Lier deux select avec Jquery chained

Lier deux select avec Jquery chained

Développement web
PHP MySQL HTML Javascript

il y a 2 ans citizenz7 0 commentaire 3042 lectures

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>

0 commentaire


Nb d'articles actifs : 45 | Nb de commentaires : 25 | Nb de catégories : 8 | Nb de tags : 32 | Nb total de lectures : 165 632
2023 citizenz.info • Some rights reserved GPLv3 • Version 3.3.4

Hé bah allez, une journée d’plus en moins. On va aller dormir et pi demain on recommence. Je peux vous dire que tavernier, c’est pas une sinécure. (Le tavernier, Kaamelott, Livre I, 28 : La botte secrète)