javascript Archives

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>

Archive d’étiquettejavascript

Récupérer l’url ajax d’un wordpress

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

Exemple

Mise en pratique