Un problème très souvent posé :
Je vais illustrer la solution en faisant afficher les département d'une région sélectionnée. J'aurai donc une base de données avec deux tables, une table pour les régions, une seconde pour les départements. En sélectionnant une région dans la première liste, je vais faire afficher la seconde liste correspondand aux départements de la région choisie.J'ai deux listes déroulantes dont le contenu est extrait d'une base de données.
Mais je voudrais que quand je sélectionne une valeur dans la première, le contenu de la seconde s'ajuste parce que selon le choix dans la première liste, je n'aurai pas les mêmes éléments dans la seconde.
Nous verrons successivement trois méthodes. Celle-ci pour commencer qui n'utilise que le PHP, une seconde faisant appel à JavaScript et enfin une alternative avec AJAX.
Voici d'abord la base de données regions et sa structure:
Code : Tout sélectionner
--
-- Base de données: `regions`
--
-- --------------------------------------------------------
--
-- Structure de la table `region`
--
CREATE TABLE `region` (
`id_region` tinyint(4) NOT NULL auto_increment,
`region` varchar(50) NOT NULL default '',
PRIMARY KEY (`id_region`)
);
-- --------------------------------------------------------
--
-- Structure de la table `departement`
--
CREATE TABLE `departement` (
`id_departement` char(2) NOT NULL default '',
`departement` varchar(50) NOT NULL default '',
`id_region` tinyint(4) NOT NULL default '0',
PRIMARY KEY (`id_departement`),
KEY `id_region` (`id_region`)
);
-- --------------------------------------------------------
--
-- Contenu de la table `region`
--
INSERT INTO `region` VALUES (1, 'Alsace');
INSERT INTO `region` VALUES (2, 'Aquitaine');
INSERT INTO `region` VALUES (3, 'Auvergne');
INSERT INTO `region` VALUES (4, 'Basse-Normandie');
INSERT INTO `region` VALUES (5, 'Bourgogne');
INSERT INTO `region` VALUES (6, 'Bretagne');
INSERT INTO `region` VALUES (7, 'Centre');
INSERT INTO `region` VALUES (8, 'Champagne');
INSERT INTO `region` VALUES (9, 'Corse');
INSERT INTO `region` VALUES (10, 'Franche-Comté');
INSERT INTO `region` VALUES (11, 'Haute-Normandie');
INSERT INTO `region` VALUES (12, 'Île-de-France');
INSERT INTO `region` VALUES (13, 'Languedoc-Roussillon');
INSERT INTO `region` VALUES (14, 'Limousin');
INSERT INTO `region` VALUES (15, 'Lorraine');
INSERT INTO `region` VALUES (16, 'Midi-Pyrénées');
INSERT INTO `region` VALUES (17, 'Nord-pas-de-Calais');
INSERT INTO `region` VALUES (18, 'Pays de la Loire');
INSERT INTO `region` VALUES (19, 'Picardie');
INSERT INTO `region` VALUES (20, 'Poitou-Charentes');
INSERT INTO `region` VALUES (21, 'Provence-Alpes-Côte-d\'Azur');
INSERT INTO `region` VALUES (22, 'Rhône-Alpes');
--
-- Contenu de la table `departement`
--
INSERT INTO `departement` VALUES ('01', 'Ain', 22);
INSERT INTO `departement` VALUES ('02', 'Aisne', 19);
INSERT INTO `departement` VALUES ('03', 'Allier', 3);
INSERT INTO `departement` VALUES ('04', 'Alpes-de-Haute-Provence', 21);
INSERT INTO `departement` VALUES ('05', 'Hautes-Alpes', 21);
INSERT INTO `departement` VALUES ('06', 'Alpes-Maritimes', 21);
INSERT INTO `departement` VALUES ('07', 'Ardèche', 22);
INSERT INTO `departement` VALUES ('08', 'Ardennes', 8);
INSERT INTO `departement` VALUES ('09', 'Ariège', 16);
INSERT INTO `departement` VALUES ('10', 'Aube', 8);
INSERT INTO `departement` VALUES ('11', 'Aude', 13);
INSERT INTO `departement` VALUES ('12', 'Aveyron', 16);
INSERT INTO `departement` VALUES ('13', 'Bouches-du-Rhône', 21);
INSERT INTO `departement` VALUES ('14', 'Calvados', 4);
INSERT INTO `departement` VALUES ('15', 'Cantal', 3);
INSERT INTO `departement` VALUES ('16', 'Charente', 20);
INSERT INTO `departement` VALUES ('17', 'Charente-Maritime', 20);
INSERT INTO `departement` VALUES ('18', 'Cher', 7);
INSERT INTO `departement` VALUES ('19', 'Corrèze', 14);
INSERT INTO `departement` VALUES ('2A', 'Corse-du-Sud', 9);
INSERT INTO `departement` VALUES ('2B', 'Haute-Corse', 9);
INSERT INTO `departement` VALUES ('21', 'Côte-d\'Or', 5);
INSERT INTO `departement` VALUES ('22', 'Côtes-d\'Armor', 6);
INSERT INTO `departement` VALUES ('23', 'Creuse', 14);
INSERT INTO `departement` VALUES ('24', 'Dordogne', 2);
INSERT INTO `departement` VALUES ('25', 'Doubs', 10);
INSERT INTO `departement` VALUES ('26', 'Drôme', 22);
INSERT INTO `departement` VALUES ('27', 'Eure', 11);
INSERT INTO `departement` VALUES ('28', 'Eure-et-Loir', 7);
INSERT INTO `departement` VALUES ('29', 'Finistère', 6);
INSERT INTO `departement` VALUES ('30', 'Gard', 13);
INSERT INTO `departement` VALUES ('31', 'Haute-Garonne', 16);
INSERT INTO `departement` VALUES ('32', 'Gers', 16);
INSERT INTO `departement` VALUES ('33', 'Gironde', 2);
INSERT INTO `departement` VALUES ('34', 'Hérault', 13);
INSERT INTO `departement` VALUES ('35', 'Ille-et-Vilaine', 6);
INSERT INTO `departement` VALUES ('36', 'Indre', 7);
INSERT INTO `departement` VALUES ('37', 'Indre-et-Loire', 7);
INSERT INTO `departement` VALUES ('38', 'Isère', 22);
INSERT INTO `departement` VALUES ('39', 'Jura', 10);
INSERT INTO `departement` VALUES ('40', 'Landes', 2);
INSERT INTO `departement` VALUES ('41', 'Loir-et-Cher', 7);
INSERT INTO `departement` VALUES ('42', 'Loire', 22);
INSERT INTO `departement` VALUES ('43', 'Haute-Loire', 3);
INSERT INTO `departement` VALUES ('44', 'Loire-Atlantique', 18);
INSERT INTO `departement` VALUES ('45', 'Loiret', 7);
INSERT INTO `departement` VALUES ('46', 'Lot', 16);
INSERT INTO `departement` VALUES ('47', 'Lot-et-Garonne', 2);
INSERT INTO `departement` VALUES ('48', 'Lozère', 13);
INSERT INTO `departement` VALUES ('49', 'Maine-et-Loire', 18);
INSERT INTO `departement` VALUES ('50', 'Manche', 4);
INSERT INTO `departement` VALUES ('51', 'Marne', 8);
INSERT INTO `departement` VALUES ('52', 'Haute-Marne', 8);
INSERT INTO `departement` VALUES ('53', 'Mayenne', 18);
INSERT INTO `departement` VALUES ('54', 'Meurthe-et-Moselle', 15);
INSERT INTO `departement` VALUES ('55', 'Meuse', 15);
INSERT INTO `departement` VALUES ('56', 'Morbihan', 6);
INSERT INTO `departement` VALUES ('57', 'Moselle', 15);
INSERT INTO `departement` VALUES ('58', 'Nièvre', 5);
INSERT INTO `departement` VALUES ('59', 'Nord', 17);
INSERT INTO `departement` VALUES ('60', 'Oise', 19);
INSERT INTO `departement` VALUES ('61', 'Orne', 4);
INSERT INTO `departement` VALUES ('62', 'Pas-de-Calais', 17);
INSERT INTO `departement` VALUES ('63', 'Puy-de-Dôme', 3);
INSERT INTO `departement` VALUES ('64', 'Pyrénées-Atlantiques', 2);
INSERT INTO `departement` VALUES ('65', 'Hautes-Pyrénées', 16);
INSERT INTO `departement` VALUES ('66', 'Pyrénées-Orientales', 13);
INSERT INTO `departement` VALUES ('67', 'Bas-Rhin', 1);
INSERT INTO `departement` VALUES ('68', 'Haut-Rhin', 1);
INSERT INTO `departement` VALUES ('69', 'Rhône', 22);
INSERT INTO `departement` VALUES ('70', 'Haute-Saône', 10);
INSERT INTO `departement` VALUES ('71', 'Saône-et-Loire', 5);
INSERT INTO `departement` VALUES ('72', 'Sarthe', 18);
INSERT INTO `departement` VALUES ('73', 'Savoie', 22);
INSERT INTO `departement` VALUES ('74', 'Haute-Savoie', 22);
INSERT INTO `departement` VALUES ('75', 'Paris', 12);
INSERT INTO `departement` VALUES ('76', 'Seine-Maritime', 11);
INSERT INTO `departement` VALUES ('77', 'Seine-et-Marne', 12);
INSERT INTO `departement` VALUES ('78', 'Yvelines', 12);
INSERT INTO `departement` VALUES ('79', 'Deux-Sèvres', 20);
INSERT INTO `departement` VALUES ('80', 'Somme', 19);
INSERT INTO `departement` VALUES ('81', 'Tarn', 16);
INSERT INTO `departement` VALUES ('82', 'Tarn-et-Garonne', 16);
INSERT INTO `departement` VALUES ('83', 'Var', 21);
INSERT INTO `departement` VALUES ('84', 'Vaucluse', 21);
INSERT INTO `departement` VALUES ('85', 'Vendée', 18);
INSERT INTO `departement` VALUES ('86', 'Vienne', 20);
INSERT INTO `departement` VALUES ('87', 'Haute-Vienne', 14);
INSERT INTO `departement` VALUES ('88', 'Vosges', 15);
INSERT INTO `departement` VALUES ('89', 'Yonne', 5);
INSERT INTO `departement` VALUES ('90', 'Territoire de Belfort', 10);
INSERT INTO `departement` VALUES ('91', 'Essonne', 12);
INSERT INTO `departement` VALUES ('92', 'Hauts-de-Seine', 12);
INSERT INTO `departement` VALUES ('93', 'Seine-Saint-Denis', 12);
INSERT INTO `departement` VALUES ('94', 'Val-de-Marne', 12);
INSERT INTO `departement` VALUES ('95', 'Val-d\'Oise', 12);
- Soit on fait recharger la page en soumettant le formulaire et on effectue une requête pour obtenir le contenu nécessaire à la seconde liste;
- Soit on utilise JavaScript pour stocker les valeurs « départements » dépendantes de la région sélectionnée.
Avantages et inconvients ?
- La première méthode fonctionne même si JavaScript est désactivé sur le navigateur de l'internaute. En revanche, comme il y a échanges d'informations entre client et serveur, c'est un peu plus lent.
- Le seconde, vous l'aurez deviné, a l'inconvénient d'être en panne si JavaScript est désactivé, mais est beaucoup plus rapide parce qu'elle s'exécute directement sur la machine du client sur laquelle on stocke les informations complètes.
Voici le code pour la méthode 100% PHP:
<?php
echo("<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n");
/* Variables de connexion : ajustez ces paramètres selon votre propre environnement */
$serveur = "localhost";
$admin = "root";
$mdp = "";
$base = "regions";
/* On récupère si elle existe la valeur de la région envoyée par le formulaire */
$idr = isset($_POST['region'])?$_POST['region']:null;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" xml:lang="fr" />
<title>Sélectionner un département selon la région choisie</title>
<meta name="description" content="Listes déroulantes dynamiques inter-dépendantes" />
<meta name="keywords" content="" />
<meta name="author" content="Cyrano" />
<meta name="generator" content="Zend Studio Environnement et WebExpert 5" />
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="Pragma" content="no-cache" />
</head>
<body style="font-family: verdana, helvetica, sans-serif; font-size: 85%">
<?php
if(isset($_POST['ok']) && isset($_POST['departement']) && $_POST['departement'] != "")
{
$region_selectionnee = $_POST['region'];
$dept_selectionne = $_POST['departement'];
?>
<p>Vous avez sélectionné le département <?php echo($dept_selectionne); ?> dans la région <?php echo($region_selectionnee); ?></p>
<?php
}
?>
<h3>Trouver un département</h3>
<?php
/* On établit la connexion à MySQL avec mysql_pconnect() plutôt qu'avec mysql_connect()
* car on aura besoin de la connexion un peu plus loin dans le script */
$connexion = mysql_pconnect($serveur, $admin, $mdp);
if($connexion != false)
{
$choixbase = mysql_select_db($base, $connexion);
$sql1 = "SELECT `id_region`, `region`".
" FROM `region`".
" ORDER BY `id_region`";
$rech_regions = mysql_query($sql1);
$code_region = array();
$region = array();
/* On active un compteur pour les régions */
$nb_regions = 0;
if($rech_regions != false)
{
while($ligne = mysql_fetch_assoc($rech_regions))
{
array_push($code_region, $ligne['id_region']);
array_push($region, $ligne['region']);
/* On incrémente de compteur */
$nb_regions++;
}
}
?>
<form action="<?php echo($_SERVER['PHP_SELF']); ?>" method="post" id="chgdept">
<fieldset style="border: 3px double #333399">
<legend>Sélectionnez une région</legend>
<select name="region" id="region" onchange="document.forms['chgdept'].submit();">
<option value="-1">- - - Choisissez une région - - -</option>
<?php
for($i = 0; $i < $nb_regions; $i++)
{
?>
<option value="<?php echo($code_region[$i]); ?>"<?php echo((isset($idr) && $idr == $code_region[$i])?" selected=\"selected\"":null); ?>><?php echo($region[$i]); ?></option>
<?php
}
?>
</select>
<?php
mysql_free_result($rech_regions);
/* On commence par vérifier si on a envoyé un numéro de région et le cas échéant s'il est différent de -1 */
if(isset($idr) && $idr != -1)
{
/* Cération de la requête pour avoir les départements de cette région */
$sql2 = "SELECT `id_departement`, `departement`".
" FROM `departement`".
" WHERE `id_region` = ". $idr ."".
" ORDER BY `id_departement`;";
if($connexion != false)
{
$rech_dept = mysql_query($sql2, $connexion);
/* Un petit compteur pour les départements */
$nd = 0;
/* On crée deux tableaux pour les numéros et les noms des départements */
$code_dept = array();
$nom_dept = array();
/* On va mettre les numéros et noms des départements dans les deux tableaux */
while($ligne_dept = mysql_fetch_assoc($rech_dept))
{
array_push($code_dept, $ligne_dept['id_departement']);
array_push($nom_dept, $ligne_dept['departement']);
$nd++;
}
/* Maintenant on peut construire la liste déroulante */
?>
<select name="departement" id="departement">
<?php
for($d = 0; $d<$nd; $d++)
{
?>
<option value="<?php echo($code_dept[$d]); ?>"<?php echo((isset($dept_selectionne) && $dept_selectionne == $code_dept[$d])?" selected=\"selected\"":null); ?>><?php echo($nom_dept[$d]." (". $code_dept[$d] .")"); ?></option>
<?php
}
?>
</select>
<?php
}
/* Un petit coup de balai */
mysql_free_result($rech_dept);
}
?>
<br /><input type="submit" name="ok" id="ok" value="Envoyer" />
</fieldset>
</form>
<?php
/* Terminé, on ferme la connexion */
mysql_close($connexion);
}
else
{
/* Si on arrive là, c'est pas bon signe, il faut vérifier les
* paramètres de connexion, mot de passe, serveur pas démarré etc... */
?>
<p>Un incident s'est produit lors de la connexion à la base de données, veuiillez essayer à nouveau ultérieurement.</p>
<?php
}
?>
</body>
</html>
Voir la Démonstration: ICITéléchargez les fichiers (index.php + region.sql) zippés ICI
.. A suivre, la méthode avec JavaScript.