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>

2nd liste déroulante

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

le script correspondant

<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>



scoco

Auteur et principal acteur de ce blog.
Entre le Roller Derby, le longboard, les geekeries et d'autres trucs, je parle un peu de tout.

24 commentaires

  1. 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.

  2. 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

    1. 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

  3. 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 ?

  4. 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 🙂

      1. 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

Leave a Comment

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *