Je voudrais créer une page sur laquelle l'utilisateur choisit un champs dans une première liste déroulante nommée "Régions" ce qui affiche une deuxième liste déroulante nommée "Département" avec les départements de la région sélectionnée dans la première liste, ensuite une troisième liste affichera les cantons du département sélectionné et une quatrième liste affichera les communes du canton sélectionné.
Une fois tous les champs sélectionné dans mes 4 listes déroulantes un résultat s'affiche qui indiquera le code postal de la commune choisit.
J'ai trouvé comment faire pour les deux première listes mais je ne comprends pas ou je dois rajouter la 3ème et la 4ème liste dans mon code.
C'est pourquoi je fais appel à vous.
Quelqu'un aurait il une idée s'il vous plait ?
Voici mon code :
Code : Tout sélectionner
/* On crée la fonction qui va construire la seconde liste déroulante */
function changeDept(tab,idr)
{
if(idr != "vide")
{
/* On compte les départements de cette région */
var nbd = tab[idr][1].length;
var form_d = '<select name="departement" id="departement">';
for(var j = 0; j < nbd; j++)
{
form_d += ' <option value="'+ tab[idr][1][j] +'">'+ tab[idr][2][j] +" ("+ tab[idr][1][j] +')<\/option>';
}
form_d += '<\/select>';
}
else
{
form_d = "";
}
document.getElementById("blocDepartements").innerHTML = form_d;
}
Code : Tout sélectionner
/**
* Fonctions de sérialisation de tableaux PHP vers des tableaux JavaScript
* On récupère des valeurs de PHP pour les retourner en JavaScript.
*/
function PhpArray2Js(tabphp_serialise)
{
this.php = corrigerChainePHP(tabphp_serialise);
var dim = this.extraireDimTab();
this.tabjs = this.transformer(dim);
}
PhpArray2Js.prototype.retour = function()
{
// retourne le tableau JS
return this.tabjs;
}
PhpArray2Js.prototype.transformer = function(dim)
{
// méthode principale qui transforme la chaîne sérialisée en un tableau Javascript
// dim est la dimension du tableau PHP
var tab = new Array();
// extrait un groupe de dim données (indice - valeur)
for (var i=0;i<dim;i++)
{
// extrait un indice : numérique ou littéral
var indice = this.extraireIndice();
if (indice == -1)
{
return;
}
// extrait une valeur : tableau, null, booléen, numérique ou littéral
var valeur = this.extraireValeur();
if (valeur == -1)
{
tab[indice] = undefined;
}
else
{
switch (valeur[0])
{
case "N" : tab[indice] = null; break;
case "b" : tab[indice] = valeur[1] ? true : false; break;
case "i" : tab[indice] = parseInt(valeur[1]); break;
case "d" : tab[indice] = parseFloat(valeur[1]); break;
case "s" : tab[indice] = valeur[1]; break;
case "a" : tab[indice] = this.transformer(valeur[1]); break;
default : tab[indice] = undefined;
}
}
}
// en fin de groupe de données, supprime le "}" final
this.php = this.php.substring(1);
return tab;
}
PhpArray2Js.prototype.extraireDimTab = function()
{
// extrait la dimension N du tableau de "a:N:{"
var reg = this.php.match(/^a:(\d+):\{/);
if (reg != -1)
{
// on coupe le texte de l'entité détectée
this.php = this.php.substring(reg[0].length);
return reg[1];
}
else
{
return -1;
}
}
PhpArray2Js.prototype.extraireIndice = function()
{
// extrait l'indice d'un tableau
// cet indice peut être de la forme "i:\d+" ou "s:\d+:\"\w+\""
var retour;
var reg = this.php.match(/^((i):(\d+);|(s):\d+:"([^"]+)";)/);
if (reg != -1)
{
// on coupe le texte de la chaîne détectée
this.php = this.php.substring(reg[0].length);
if (reg[2] == "i") retour = reg[3];
else if (reg[4] == "s") retour = reg[5];
else retour = -1;
}
else retour = -1;
return retour;
}
PhpArray2Js.prototype.extraireValeur = function()
{
// extrait une valeur au début de this.php
// cette valeur est de type "a:\d+:{" ou "N" ou "b:[01]" ou "i:\d+" ou "i:[\d\.]+" ou "s:\d+:\"\w+\""
// on tente de détecter une valeur en tête de texte
var retour;
var reg = this.php.match(/^((N);|(b):([01]);|(i):(\d+);|(d):([\d\.]+);|(s):\d+:"([^"]*)";|(a):(\d+):\{)/);
if (reg != -1)
{
// on coupe le texte de la valeur détectée
this.php = this.php.substring(reg[0].length);
// retour est un tableau contenant le type et la valeur de la donnée détectée dans la chaîne
if (reg[2] == "N") retour = new Array("N", null); // valeur nulle
else if (reg[3] == "b") retour = new Array("b", reg[4]); // booléen (true/false)
else if (reg[5] == "i") retour = new Array("i", reg[6]); // entier
else if (reg[7] == "d") retour = new Array("d", reg[8]); // entier double ou flottant
else if (reg[9] == "s") retour = new Array("s", remplacerQuotes(reg[10])); // chaîne de caractères
else if (reg[11] == "a") retour = new Array("a", reg[12]); // sous-tableau
else retour = -1;
}
else retour = -1;
return retour;
}
function corrigerChainePHP(chaine)
{
// remplace les " en " uniquement autour des chaînes de caractères
chaine = chaine.replace(/:"/g, ':"');
chaine = chaine.replace(/";/g, '";');
return chaine;
}
function remplacerQuotes(chaine)
{
// remplace les " à l'intérieur des chaînes de caractères
return chaine.replace(/"/g, '\"');
}
PhpArray2Js.prototype.var_dump = function() {
// affiche le tableau
return var_dump(this.tabjs);
}
function var_dump(tab)
{
// fonction analogue à var_dump en PHP, mais plus simple
var indent = (arguments.length == 2) ? arguments[1] + "\t" : "\t";
var i = 0;
var elements = "";
for (var elt in tab)
{
elements += (i ? ",\n " : " ") + indent + "[" + elt + "]:";
switch (typeof tab[elt])
{
case "string" :
elements += "\"" + tab[elt] + "\""; break;
case "number" :
elements += tab[elt]; break;
case "object" :
if (tab[elt] == null) elements += "*null*";
else if (tab[elt]) elements += var_dump(tab[elt], indent); break;
case "undefined" :
elements += "*undefined*"; break;
default : elements += tab[elt];
}
i++;
}
return "tableau(" + i + "){\n" + elements + "\n" + (arguments[1] ? arguments[1] : "") + "}";
}
Code : Tout sélectionner
<?php
echo("<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n");
/* Variables de connexion : ajustez ces paramètres selon votre propre environnement */
$serveur = "******";
$admin = "******";
$mdp = "******";
$base = "******";
?>
<!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>Liste déroulantes dynamiques liées</title>
<meta name="description" content="Listes dynamiques liées: la seconde liste est modifiée instantanément lors d'une sélection sur la première." />
<meta name="keywords" content="menu,déroulant,select,liées,JavaScript" />
<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" />
<script type="text/javascript" src="./arrayPHP2JS.js" charset="iso_8859-1"></script>
<script type="text/javascript" src="./changeDept.js" charset="iso_8859-1"></script>
<?php
/* Requête SQL de récupération des données */
$sql = "SELECT id_departement AS idd, departement AS dept, region.id_region AS idr, region ".
"FROM departement, region ".
"WHERE departement.id_region = region.id_region ".
"ORDER BY region.id_region;";
/* Connexion et exécution de la requête */
$connexion = mysql_pconnect($serveur, $admin, $mdp);
if($connexion != false)
{
$choixbase = mysql_select_db($base, $connexion);
$recherche = mysql_query($sql, $connexion);
/* Pour ne pas écraser mes tableaux, je crée un témoin */
$temoin_r = 0;
/* Création du tableau PHP des valeurs récupérées */
$regions = array();
/* Index du département par tableau régional */
$id = 0;
while($ligne = mysql_fetch_assoc($recherche))
{
$r = $ligne['idr'];
$d = $ligne['idd'];
/* Je vérifie si je suis toujours dans la même région, sinon je crée les tableaux nécessaires */
if($temoin_r != $r)
{
$regions[$r] = array();
/* J'ajoute laa région */
$regions[$r][0] = $ligne['region'];
$regions[$r][1] = array();
$regions[$r][2] = array();
$temoin_r = $r;
$id = 0;
}
/* J'ajoute les départements */
$regions[$r][1][$id] = $d;
$regions[$r][2][$id] = $ligne['dept'];
$id++;
}
/* On sérialise le tableau obtenu pour traitement par JavaScript */
$chaine = htmlspecialchars(serialize($regions), ENT_QUOTES);
?>
<script type="text/javascript">
/* <![CDATA[ */
<!--
/*
* Ici, on transmets la chaîne sérialisée à JavaScript
* pour la transformer en tableau indexé JavaScript
*/
var tableau = new PhpArray2Js('<?php echo $chaine; ?>');
var tab = tableau.retour();
// -->
/* ]]> */
</script>
</head>
<body style="font-family: verdana, helvetica, sans-serif; font-size: 85%">
<h3>Version Utilisant JavaScript</h3>
<p>Vous constaterez que le délai de latence entre la sélection et la mise à jour est quasiment inexistant.</p>
<?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
}
?>
<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="changeDept(tab,this.value);">
<option value="vide">- - - Choisissez une région - - -</option>
<?php
/* Construction de la première liste : on se sert du tableau PHP */
$nbr = count($regions);
foreach($regions as $nr => $nom)
{
?>
<option value="<?php echo($nr); ?>"><?php echo($nom[0]); ?></option>
<?php
}
?>
</select>
<!-- ICI, le secret : on met un bloc avec un id ou va s'insérer le code de
la seconde liste déroulande -->
<span id="blocDepartements"></span><br />
<input type="submit" name="ok" id="ok" value="Envoyer" />
</fieldset>
</form>
<?php
}
else
{
/* Si vous arrivez ici, vous avez un gros problème avec la connexion au serveur de base de données */
?>
</head>
<body>
<p>La connexion au serveur de base de données a échoué. Aucun élément ne peut être affiché.</p>
<?php
}
?>
<p><a href="./index.php" title="Aller vers la version 100% PHP">Aller vers la version 100% PHP</a></p>
</body>
</html>