JQuery – Listes déroulantes liées avec Chained Selects

En jQuery, on peut faire pas mal de choses. Cette fois ci, voici un tutoriel pour lier plusieurs listes déroulantes est une traduction et adaptation d’un article de Mika Tuupola (Créateur du plugin) à mes besoins.

Chained Selects est un plugin jQuery qui consiste à lier plusieurs  listes déroulantes entre elles.
Fichier disponible ici

Exemple





Dans une première liste déroulante, vous choisissez une région. Dans la seconde liste déroulante, vont s’afficher tout les départements qui appartiennent à cette région.

Dans ce tutoriel, nous allons utiliser le jeu d’exemple suivant: Les régions et les départements français ! (Fichier MySQL)

Mise en pratique

1ere liste déroulante

<select id="region">
<option>---</option>
<option value="1">Alsace</option>
<option value="2">Aquitaine</option>
<option value="3">Auvergne</option>
<option value="4">Basse Normandie</option>
<option value="5">Bourgogne</option>
<option value="6">Bretagne</option>
<option value="7">Centre</option>
<option value="8">Champagne Ardenne</option>
<option value="9">Corse</option>
<option value="10">Franche Comté</option>
<option value="11">Haute Normandie</option>
<option value="12">Ile de France</option>
<option value="13">Languedoc Roussillon</option>
<option value="14">Limousin</option>
<option value="15">Lorraine</option>
<option value="16">Midi-Pyrénées</option>
<option value="17">Nord Pas de Calais</option>
<option value="18">P.A.C.A</option>
<option value="19">Pays de la Loire</option>
<option value="20">Picardie</option>
<option value="21">Poitou Charente</option>
<option value="22">Rhone Alpes</option>
</select>
<select id="departement" disabled="disabled">
<option value="">--</option>
<option class="22" value="1">Ain</option>
<option class="20" value="2">Aisne</option>
<option class="3" value="3">Allier</option>
<option class="18" value="4">Alpes de haute provence</option>
<option class="18" value="5">Hautes alpes</option>
<option class="18" value="6">Alpes maritimes</option>
<option class="22" value="7">Ardèche</option>
<option class="8" value="8">Ardennes</option>
<option class="16" value="9">Ariège</option>
<option class="8" value="10">Aube</option>
<option class="13" value="11">Aude</option>
<option class="16" value="12">Aveyron</option>
<option class="18" value="13">Bouches du rhône</option>
<option class="4" value="14">Calvados</option>
<option class="3" value="15">Cantal</option>
<option class="21" value="16">Charente</option>
<option class="21" value="17">Charente maritime</option>
<option class="7" value="18">Cher</option>
<option class="14" value="19">Corrèze</option>
<option class="5" value="21">Côte d'or</option>
<option class="6" value="22">Côtes d'Armor</option>
<option class="14" value="23">Creuse</option>
<option class="2" value="24">Dordogne</option>
<option class="10" value="25">Doubs</option>
<option class="22" value="26">Drôme</option>
<option class="11" value="27">Eure</option>
<option class="7" value="28">Eure et Loir</option>
<option class="6" value="29">Finistère</option>
<option class="13" value="30">Gard</option>
<option class="16" value="31">Haute garonne</option>
<option class="16" value="32">Gers</option>
<option class="2" value="33">Gironde</option>
<option class="13" value="34">Hérault</option>
<option class="6" value="35">Ile et Vilaine</option>
<option class="7" value="36">Indre</option>
<option class="7" value="37">Indre et Loire</option>
<option class="22" value="38">Isère</option>
<option class="10" value="39">Jura</option>
<option class="2" value="40">Landes</option>
<option class="7" value="41">Loir et Cher</option>
<option class="22" value="42">Loire</option>
<option class="3" value="43">Haute loire</option>
<option class="19" value="44">Loire Atlantique</option>
<option class="7" value="45">Loiret</option>
<option class="16" value="46">Lot</option>
<option class="2" value="47">Lot et Garonne</option>
<option class="13" value="48">Lozère</option>
<option class="19" value="49">Maine et Loire</option>
<option class="4" value="50">Manche</option>
<option class="8" value="51">Marne</option>
<option class="8" value="52">Haute Marne</option>
<option class="19" value="53">Mayenne</option>
<option class="15" value="54">Meurthe et Moselle</option>
<option class="15" value="55">Meuse</option>
<option class="6" value="56">Morbihan</option>
<option class="15" value="57">Moselle</option>
<option class="5" value="58">Nièvre</option>
<option class="17" value="59">Nord</option>
<option class="20" value="60">Oise</option>
<option class="4" value="61">Orne</option>
<option class="17" value="62">Pas de Calais</option>
<option class="3" value="63">Puy de Dôme</option>
<option class="2" value="64">Pyrénées Atlantiques</option>
<option class="16" value="65">Hautes Pyrénées</option>
<option class="13" value="66">Pyrénées Orientales</option>
<option class="1" value="67">Bas Rhin</option>
<option class="1" value="68">Haut Rhin</option>
<option class="22" value="69">Rhône</option>
<option class="10" value="70">Haute Saône</option>
<option class="5" value="71">Saône et Loire</option>
<option class="19" value="72">Sarthe</option>
<option class="22" value="73">Savoie</option>
<option class="22" value="74">Haute Savoie</option>
<option class="12" value="75">Paris</option>
<option class="11" value="76">Seine Maritime</option>
<option class="12" value="77">Seine et Marne</option>
<option class="12" value="78">Yvelines</option>
<option class="21" value="79">Deux Sèvres</option>
<option class="20" value="80">Somme</option>
<option class="16" value="81">Tarn</option>
<option class="16" value="82">Tarn et Garonne</option>
<option class="18" value="83">Var</option>
<option class="18" value="84">Vaucluse</option>
<option class="19" value="85">Vendée</option>
<option class="21" value="86">Vienne</option>
<option class="14" value="87">Haute Vienne</option>
<option class="10" value="88">Vosge</option>
<option class="5" value="89">Yonne</option>
<option class="10" value="90">Territoire de Belfort</option>
<option class="12" value="91">Essonne</option>
<option class="12" value="92">Haut de seine</option>
<option class="12" value="93">Seine Saint Denis</option>
<option class="12" value="94">Val de Marne</option>
<option class="12" value="95">Val d'Oise</option>
<option class="9" value="2a">Corse du Sud</option>
<option class="9" value="2b">Haute Corse</option>
</select>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
 <script src="js/jquery.chained.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript" charset="utf-8">
               $(function () {
                   $("#departement").chained("#region");
               });
   </script>
  • Sam

    Bonjour,

    Quel sont les pré-requis pour utiliser ce script ?

    Je suis sur la version 54.0.1 de firefox (à priori la plus récente) et malgré cela, lorsque je choisis une région sur cette page, le département n’apparait pas.

    Merci

  • david

    Bonjour, merci pour l’article, excellent. Je débute avec jQuery et javascript. Malheureusement avec ce script je n’arrive pas à récupérer ensuite le choix de la deuxième box, en l’occurrence le département pour qu’il ouvre une page spécifique par exemple . Merci en tout cas – See more at: http://www.scoco.fr/listes-deroulantes-liees-avec-chained-selects-jquery/#comment-42253

  • Zgrub

    Bonjour,

    merci pour cet exemple, ça marche très bien.
    J’essaye de réaliser la même chose mais avec un champ de saisie type search box , ca serait faisable ? Mes essais avec formulaire restent sans succès.

  • Orpheelyre

    Bonjour,

    merci beaucoup pour ce script très utile!
    Celui-ci permet d’afficher les options d’une deuxième liste déroulante, en fonction de ce qui a été sélectionné dans la première.
    J’aimerais pour ma part savoir s’il est possible d’afficher un résultat en fonction de ce qui a été sélectionné dans DEUX listes déroulantes.
    Je m’explique :
    – j’aimerais une première liste déroulante qui propose différentes pratiques de gym (steps, abdos fessiers…)
    – une deuxième liste déroulante qui propose les différents départements d’idf.

    A partir de ce qui a été sélectionné dans ces deux listes, j’aimerais renvoyer à l’utilisateur la liste des possibilités correspondantes. Par exemple : Mme Dupont veut faire du step et habite dans le 91. Elle sélectionne ces deux critères et obtient la liste des endroits où elle peut pratiquer.

    Merci beaucoup par avance

    • Bonjour,

      Pour ce type de « requete », il va falloir s’orienter vers un formulaire (qui peu être fait avec ce système de liste de roulante), puis a la validation de ce formulaire, intéroger votre base de donnée pour afficher les résultats voulus

      Exemple:
      1/ Formulaire (Liste1 + Liste2)
      2/ valider / rechercher
      3/ Chercher dans votre base de donnée les resultats en fonction de liste1 et liste2
      4/ Afficher les résultats

      Ca demande un peu de développement

  • JOJO

    est ce que c’est possible d’utiliser jquery chained et jquery validation

  • yann

    est il possible de mettre onchange location vers une url sur la value du 2ieme select

    • Oui c’est possible par contre il faudra réfléchir a comment le mettre en place !

  • TestHeure

    Est-il possible de réaliser l’enchaînement des listes déroulantes sans avoir à installer le plugin ?

    • Oui c’est possible mais il faudra développer son propre script.

  • Albat’

    Ce script a l’avantage d’être extrêmement simple à mettre en place, mais dans la mesure où il nécessite de construire préalablement les select avec des listes complètes, est-il applicable à un modèle région/département/ville ?

    Il y a quand même 37000 communes en France et je crains que cela affecte les performances, non ?

    • En effet, cela risque de bien charger la page
      C’est là que l’ajax rentre en jeu

  • ranai

    Bonjour
    Je n’arrive pas a adapter le code pour 4 listes
    Comment s’y prendre pour afficher le resultat final
    Cordialement

    • $(« #liste2 »).chained(« #liste1 »);
      $(« #liste3 »).chained(« #liste2 »);
      $(« #liste4 »).chained(« #liste3 »);

  • Comment faire simple quand on peut faire compliqué. J’avais commencé à utiliser Ajax pour récupérer la liste des options disponibles lorsqu’un autre select est selectionné, alors que je n’avais même pas pensé à utiliser de simples classes !

    Merci encore, ça va m’épargner pas mal de galère 🙂

    • Un amis a corrigé certain bug et ajouté une fonctionnalité pour gérer les accents, je vous la met à disposition sous peu.

  • Elgorafi

    Bonjour, je suis débutant en jquery et je ne comprends pas comment je dois organiser mes fichiers, quels sont-ils aussi … urgent svp Merci !!

  • Sam

    Bonjour, super plug in !
    J’ai pas réussi mais, ça marche avec 3 listes par exemple ?
    🙂

    • Oui, il est possible de le lier avec 3-4-5-6-….. listes sans problèmes !

  • Fayssalis

    C’est Super !

  • Arrow

    Super, efficace, rapide et simple à mettre en place.
    Merci pour le tuyau

    • Content que çà serve 🙂

  • C’est cool ça évite de passer par de l’ajax en plus j’ai l’impression à tester =)

    • Heisenberg

      C’est moche

      • david

        Bonjour, merci pour l’article, excellent. Je débute avec jQuery et javascript. Malheureusement avec ce script je n’arrive pas à récupérer ensuite le choix de la deuxième box, en l’occurrence le département pour qu’il ouvre une page spécifique par exemple . Merci en tout cas