Voici une méthode un peut complexe mais qui utilise Ajax pour mettre à jour des listes mise en relations.
La page principale est écrite en HTML/AJAX
Principal.HTM
<script>
function ajax_Response(URL){
if(window.XMLHttpRequest) // Hors IE
xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject) // IE
xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
else
return(false);
//Ouvrir URL
xhr_object.open("GET", URL, false);
xhr_object.send(null);
//Attendre la réponse
if(xhr_object.readyState == 4) return(xhr_object.responseText);
else return(false);
}
//Evénement "onChange" implémenté pour la liste
function liste_change(liste){
if (liste){
if (liste.name=="pays"){
//Si la liste des pays est modifiée alors reconstruire les listes département et ville selon le pays choisi
document.all["div_liste_departement"].innerHTML = ajax_Response ("http://localhost/test/bdd/liste.php?liste=departement&pays="+liste.value);
document.all["div_liste_ville"].innerHTML = ajax_Response ("http://localhost/test/bdd/liste.php?liste=ville");
}
if (liste.name=="departement")
//Si la liste des départements est modifiée alors reconstruire la liste ville selon le département choisi
document.all["div_liste_ville"].innerHTML = ajax_Response ("http://localhost/test/bdd/liste.php?liste=ville&departement="+liste.value);
}
else {
//Au démarrage aucune liste n'est modifiée : Construire alors les 3 listes (pays, département et ville)
document.all["div_liste_pays"].innerHTML = ajax_Response ("http://localhost/test/bdd/liste.php?liste=pays");
document.all["div_liste_departement"].innerHTML = ajax_Response ("http://localhost/test/bdd/liste.php?liste=departement");
document.all["div_liste_ville"].innerHTML = ajax_Response ("http://localhost/test/bdd/liste.php?liste=ville");
}
}
</script>
<body onLoad="liste_change(null); //Démarrage">
<p>Blabla
<p>Blabla
<p>Blabla
<Div id="div_liste_pays"></Div>
<p>Blabla
<p>Blabla
<p>Blabla
<p>Blabla
<Div id="div_liste_departement"></Div>
<p>Blabla
<p>Blabla
<p>Blabla
<p>Blabla
<Div id="div_liste_ville"></Div>
La page liste.php est le serveur de construction des listes HTML selon les choix effectués dans la page Principal.htm.
Ici la base de données est sous forme de tableaux pour simplifier l'exemple.
Liste.php
<?php
extract ($_GET);
if ($liste == "pays"){
//Liste des pays
$pays = array ("1"=>"Pays 1","2"=>"Pays 2","3"=>"Pays 3");
$titre = "Pays";
$nom = "pays";
$option_selectionnée = $_GET[pays]?$_GET[pays]:"1";
//Affichage de la liste
liste($titre, $nom, $pays, $option_selectionnée);
}
if ($liste == "departement"){
//Liste des villes par pays
switch ($_GET[pays]){
case "1": $departements = array("1.1"=>"Département 1.1", "1.2"=>"Département 1.2", "1.3"=>"Département 1.3"); break;
case "2": $departements = array("2.1"=>"Département 2.1", "2.2"=>"Département 2.2"); break;
case "3": $departements = array("3.1"=>"Département 3.1", "3.2"=>"Département 3.2", "3.3"=>"Département 3.3", "3.4"=>"Département 3.4"); break;
default : $departements = array("1.1"=>"Département 1.1", "1.2"=>"Département 1.2", "1.3"=>"Département 1.3"); break;
}
$titre = "Département";
$nom = "departement";
$option_selectionnée = $_GET[departement]?$_GET[departement]:"";
//Affichage de la liste
liste($titre, $nom, $departements, $option_selectionnée);
}
if ($liste == "ville"){
//Liste des villes par pays
switch ($_GET[departement]){
case "1.1": $villes = array("1.1.1"=>"Ville 1.1.1", "1.1.2"=>"Ville 1.1.2"); break;
case "1.2": $villes = array("1.2.1"=>"Ville 1.2.1", "1.2.2"=>"Ville 1.2.2"); break;
case "1.3": $villes = array("1.3.1"=>"Ville 1.3.1", "1.3.2"=>"Ville 1.3.2"); break;
case "2.1": $villes = array("2.1.1"=>"Ville 2.1.1", "2.1.2"=>"Ville 2.1.2"); break;
case "2.2": $villes = array("2.2.1"=>"Ville 2.2.1", "2.2.2"=>"Ville 2.2.2"); break;
case "3.1": $villes = array("1.1.1"=>"Ville 3.1.1", "1.1.1"=>"Ville 3.1.2"); break;
case "3.2": $villes = array("3.2.1"=>"Ville 3.2.1", "3.2.2"=>"Ville 3.2.2"); break;
case "3.3": $villes = array("3.3.1"=>"Ville 3.3.1", "3.3.2"=>"Ville 3.3.2"); break;
case "3.4": $villes = array("3.4.1"=>"Ville 3.4.1", "3.4.2"=>"Ville 3.4.2"); break;
default : $villes = array("1.1.1"=>"Ville 1.1.1", "1.1.2"=>"Ville 1.1.2"); break;
}
$titre = "Ville";
$nom = "ville";
$option_selectionnée = $_GET[ville]?$_GET[ville]:"";
//Affichage de la liste
liste($titre, $nom, $villes, $option_selectionnée);
}
//Code de construction d'un objet liste HTML
function liste($titre="Liste 1", $nom="Liste1", $options=array(), $option_selectionnée=""){
echo "$titre <SELECT name=\"$nom\" onChange=\"liste_change(this);\"><OPTION value=\"\">---</OPTION>";
if ($options)
foreach ($options as $valeur=>$texte)
echo "<OPTION value=\"$valeur\"".($valeur==$option_selectionnée?" SELECTED ":"").">$texte</OPTION>";
echo "</SELECT>";
}
?>