Listes déroulantes JS

Bonjour à tous,

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* 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;
}

Mon deuxième code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
/**
* 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 &quot; en " uniquement autour des chaînes de caractères
    chaine = chaine.replace(/:&quot;/g, ':"');
    chaine = chaine.replace(/&quot;;/g, '";');
    return chaine;
}
 
function remplacerQuotes(chaine)
{
    // remplace les &quot; à l'intérieur des chaînes de caractères
    return chaine.replace(/&quot;/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] : "") + "}";
}

et ma page d'affichage :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<?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>