Tutoriel : listes liées avec Jquery

Pour certains formulaires, l'utilisation de listes liées est particulièrement appréciable. On peut citer les formulaires nécessitant d'appeler des régions et des départements par exemple. Il existe tant d'autres exemples que l'on va se concentrer sur celui-ci.

Appel des informations depuis une base de données

Dans notre exemple, on va commencer par créer deux tables. Celles des régions, puis celle des départements appartenant aux régions ajoutées dans notre base de données.

CREATE TABLE `liste_regions` (
    `id` INT(11) NOT NULL,
    `nom` VARCHAR(50) NOT NULL
) ENGINE = MYISAM  CHARACTER SET utf8 COLLATE utf8_general_ci;
CREATE TABLE  `liste_departements` (
    `id` INT(11) NOT NULL,
    `id_region` INT(11) NOT NULL,
    `nom` VARCHAR(50) NOT NULL
) ENGINE = MYISAM CHARACTER SET utf8 COLLATE utf8_general_ci;

Maintenant que nous avons nos deux tables, il faut les remplir un minimum pour notre exemple. On ajoute quelques régions et nous relions une dizaine de départements à celles-ci.

INSERT INTO `liste_regions` (`id`, `nom`) VALUES
(1, 'Alsace'),
(2, 'Aquitaine'),
(3, 'Auvergne');

INSERT INTO `liste_departements` (`id`, `id_region`, `nom`) VALUES
(1, 1, 'Bas-Rhin'),
(2, 1, 'Haut-Rhin'),
(3, 2, 'Dordogne'),
(4, 2, 'Gironde'),
(5, 2, 'Landes'),
(6, 2, 'Lot-et-Garonne'),
(7, 2, 'Pyrénées-Atlantiques'),
(8, 3, 'Allier'),
(9, 3, 'Cantal'),
(10, 3, 'Haute-Loire'),
(11, 3, 'Puy-de-Dôme');

Nous allons pouvoir construire le formulaire et afficher les informations issues de la base de données. On commence par l'affichage de la première liste, celle des départements. Pensez également à ouvrir une connexion à votre base de données.

<?php
// Connexion a la BDD
$bddname = 'nom_de_la_base';
$hostname = 'localhost';
$username = 'utilisateur';
$password = 'mot_de_passe';
$db = mysqli_connect ($hostname, $username, $password, $bddname);
?>
<form method="post">
<select name="region" id="region">
<option value="">Sélectionner une région</option>
<?php
// Appel des regions
$req = "SELECT id, nom FROM liste_regions ORDER BY id";
$rep = mysqli_query($db, $req);
while ($row = mysqli_fetch_array($rep)) {
    echo "<option value=".$row['id'].">".$row['nom']."</option>";
}
?>
</select>
</form>

Voir le résultat

Le but est maintenant de proposer une seconde liste, celle des départements. Si vous sélectionnez une région, on ne doit afficher que les départements rattachées à celle-ci.

Après le premier select, on ajoute le second comme ceci :

<select name="departement" id="departement">
<option value="">Sélectionner un département</option>
<?php
// Appel des departements
$req = "SELECT id, id_region, nom FROM liste_departements ORDER BY id";
$rep = mysqli_query($db, $req);
while ($row = mysqli_fetch_array($rep)) {
    echo "<option value=".$row['id'].">".$row['nom']."</option>";
}
?>
</select>

Si vous regardez le résultat, tous les départements sont affichés dans la seconde liste. Nous allons donc ajouter une couche de JQuery pour afficher uniquement les départements souhaités. Dans un premier temps, il est nécessaire de télécharger un plugin pour gérer les listes liées : http://plugins.jquery.com/chained/. Après avoir déposé le script sur votre serveur, appelez-le comme suit entre les balise head, sans omettre d'appeler jquery juste avant :

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.chained.js"></script>

Pour que le plugin fonctionne, ajouter juste en dessous des deux scripts :

<script type="text/javascript">$(function(){
    $("#departement").chained("#region");
});
</script>

Et la dernière modification concerne la seconde liste, remplacer :

echo "<option value=".$row['id'].">".$row['nom']."</option>";

Par :

echo "<option value=".$row['id']." class=".$row['id_region'].">".$row['nom']."</option>";

Si vous avez bien suivi, nous avons ajouté une classe dans laquelle on affiche l'identifiant de la région. C'est grâce à ce dernier que seuls les départements dépendants d'une région seront appelés.

Voir le résultat final. Pour info, tant que vous n'avez pas sélectionné une donnée dans la première liste, la seconde demeure inaccessible.

A noter qu'il est possible grâce à ce sytème de créer autant de listes liées que vous le souhaitez. Il suffit juste d'adapter ce code très facile à mettre en place.