[PHP-JS] Lier deux listes déroulantes

Version imprimable

J'ai deux listes déroulantes et j'aimerais bien que la deuxième se remplisse en fonction de la seconde mais je ne vois pas comment faire :

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
	<tr>
	<td align="right"><strong>Rubrique :</strong> </td>
	<td align="left">
	<select>
	<option>---</option>
	<?
	$sqlrubrique = 'SELECT DISTINCT * FROM rubrique ORDER BY nom_rubrique';
	$rubrique = mysql_query($sqlrubrique);
		while($rubrique_array = mysql_fetch_array($rubrique)) {
			?>
			<option value="<? echo $rubrique_array['ID_rubrique'];?>">
			<?
			echo $rubrique_array['nom_rubrique'];
			?>
			</option><br>
			<?
			}
	?>
	</select>
	</td>
	</tr>
    <tr>
	<tr>
	<td align="right"><strong>Détail rubrique :</strong> </td>
	<td align="left">
	<select name="iddetailrubrique">
	<option>---</option>
	<?
	$sqldetailrubrique = 'SELECT DISTINCT * FROM detailrubrique ORDER BY nom_detailrubrique';
	$detailrubrique = mysql_query($sqldetailrubrique);
		while($detailrubrique_array = mysql_fetch_array($detailrubrique)) {
			?>
			<option value="<? echo $detailrubrique_array['ID_detailrubrique'];?>">
			<?
			echo $detailrubrique_array['nom_detailrubrique'];
			?>
			</option><br>
			<?
			}
	?>
	</select>
	</td>
	</tr>

15/11/2005, 11h08
Mr N.

tu veux que ca se fasse en live sans rafraichissement de la page ?
Si oui alors regarde ici :
http://javascript.developpez.com/faq...er#listesLiees

j'ai modifié le code et j'obtiens le code suivant, qui m'affiche une liste mais pas déroulante et qui remplis la suivante, moi j'aimerais que la deuxieme se remplisse en fonction d'une requete et que cette requete soit fonction du choix de la premiere liste :

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
<script>
function ajout(listeRubrique){
    var existe = 0;
    if(listeRubrique.options[listeRubrique.selectedIndex].value == 0){
    }
    else{
        for(i=1;i< document.getElementById('detailRubrique').length ;i++){
            if(document.getElementById('detailRubrique').options[i].text == listeRubrique.options[listeRubrique.selectedIndex].text){
                existe = 1;
            }
            else{
                if(existe == 1){
                    existe = 1;
                }
                else{
                    existe = 0;
                }
            }
        }
 
        if(existe == 0){
            var option = new Option(listeRubrique.options[listeRubrique.selectedIndex].text,listeRubrique.options[listeRubrique.selectedIndex].value);  
            document.getElementById('detailRubrique').options[0].text = "-- Liste des Rubriques --";
            document.getElementById('detailRubrique').options[0].value = 0;
            document.getElementById('detailRubrique').options[(document.getElementById('detailRubrique').length)] = option;
        }
        else{
            alert('Cette option est déjà séléctionnée !!!');
        }
    }
}
 
function enleve(listedetailRubrique){
    if(listedetailRubrique.options[listedetailRubrique.selectedIndex].value == 0){
    }
    else{
        listedetailRubrique.options[listedetailRubrique.selectedIndex] = null;
    }
}
</script>
 
<table width='90%'>
    <tr>
        <td>
            <select name='Rubrique' size='5' ondblclick='ajout(this)' style="scrollbar-3dlight-color:red; border: red 1px solid; BACKGROUND-COLOR: #f2f2f2">
                <option value='0'>Double clic pour sélectionner un client</option>
                <option value='1'>Option 1</option>
                <option value='2'>Option 2</option>
                <option value='3'>Option 3</option>
                <option value='4'>Option 4</option>
            </select>
        </td>
        <td>
            <select name='detailRubrique' id='detailRubrique' size='5' ondblclick="enleve(this);" style="scrollbar-3dlight-color:red; border: red 1px solid; BACKGROUND-COLOR: #f2f2f2">
                <option value='0'>Aucune option n'est séléctionnée !!!</option>
            </select>
        </td>
    </tr>
</table>

Voila j'ai bien deux listes déroulantes la première se remplit en fonction d'une requete.

Dans ma premiere liste, on a la liste des rubriques. Dans la deuxième j'aimerais la liste des sous rubriques de la rubrique sélectionnée en premier.

Maintenant j'aimerais que la deuxieme liste affiche la liste des sous rubriques de la rubrique sélectionnée et non la rubrique sélectionnée, voilà mon 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
<script>
function ajout(listeRubrique){
    var existe = 0;
    if(listeRubrique.options[listeRubrique.selectedIndex].value == 0){
    }
    else{
        for(i=1;i< document.getElementById('detailRubrique').length ;i++){
            if(document.getElementById('detailRubrique').options[i].text == listeRubrique.options[listeRubrique.selectedIndex].text){
                existe = 1;
            }
            else{
                if(existe == 1){
                    existe = 1;
                }
                else{
                    existe = 0;
                }
            }
        }
 
        if(existe == 0){
            var option = new Option(listeRubrique.options[listeRubrique.selectedIndex].text,listeRubrique.options[listeRubrique.selectedIndex].value);  
            document.getElementById('detailRubrique').options[0].text = "-- Liste des Rubriques --";
            document.getElementById('detailRubrique').options[0].value = 0;
            document.getElementById('detailRubrique').options[(document.getElementById('detailRubrique').length)] = option;
        }
        else{
            alert('Cette option est déjà séléctionnée !!!');
        }
    }
}
 
function enleve(listedetailRubrique){
    if(listedetailRubrique.options[listedetailRubrique.selectedIndex].value == 0){
    }
    else{
        listedetailRubrique.options[listedetailRubrique.selectedIndex] = null;
    }
}
</script>
 
<? include ('connect.php');?>
 
<table width='90%'>
    <tr>
        <td>
            <select name='Rubrique' onChange='ajout(this)' style="scrollbar-3dlight-color:red; border: red 1px solid; BACKGROUND-COLOR: #f2f2f2">
                <option value='0'>------</option>
<!--                 <option value='1'>Option 1</option>
                <option value='2'>Option 2</option>
                <option value='3'>Option 3</option>
                <option value='4'>Option 4</option> -->
				<?
	$sqlrubrique = 'SELECT DISTINCT * FROM rubrique ORDER BY nom_rubrique';
	$rubrique = mysql_query($sqlrubrique);
		while($rubrique_array = mysql_fetch_array($rubrique)) {
			?>
			<option value="<? echo $rubrique_array['ID_rubrique'];?>">
			<?
			echo $rubrique_array['nom_rubrique'];
			?>
			</option><br>
			<?
			}
			?>
            </select>
        </td>
        <td>
            <select name='detailRubrique' id='detailRubrique' ondblclick="enleve(this);" style="scrollbar-3dlight-color:red; border: red 1px solid; BACKGROUND-COLOR: #f2f2f2">
                <option value='0'>Aucune rubrique n'est séléctionnée !!!</option>
            </select>
        </td>
    </tr>
</table>

voilà j'ai suivi un tuto dans lequel il y a trois fichier dont voici les codes :

voila le code de index2.php :

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
<?
$serveur = "localhost";
$admin   = "root";
$mdp     = "";
$base    = "savoiritc";
?>
<!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_detailrubrique AS idd, nom_detailrubrique AS dept, rubrique.ID_rubrique AS idr, nom_rubrique ".
"FROM detailrubrique, rubrique ".
"WHERE detailrubrique.ID_rubrique = rubrique.ID_rubrique ".
"ORDER BY rubrique.ID_rubrique;";
/* 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);
	echo $sql;
    /* 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 */
    $rubrique = 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)
        {
            $rubrique[$r] = array();
            /* J'ajoute laa région */
            $rubrique[$r][0] = $ligne['nom_rubrique'];
            $rubrique[$r][1] = array();
            $rubrique[$r][2] = array();
            $temoin_r = $r;
            $id = 0;
        }
        /* J'ajoute les départements */
        $rubrique[$r][1][$id] = $d;
        $rubrique[$r][2][$id] = $ligne['dept'];
        $id++;
    }
    /* On sérialise le tableau obtenu pour traitement par JavaScript */
    $chaine = htmlspecialchars(serialize($rubrique), 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['rubrique']) && $_POST['detailrubrique'] != "")
{
    $rubrique_selectionnee = $_POST['rubrique'];
    $detailrubrique_selectionne = $_POST['detailrubrique'];
?>
<p>Vous avez sélectionné le département <?php echo($detailrubrique_selectionne); ?> dans la région <?php echo($rubrique_selectionnee); ?></p>
<?php
}
?>
<form action="<?php echo($_SERVER['PHP_SELF']); ?>" method="post" id="chgdetailrubrique">
  <fieldset style="border: 3px double #333399">
  <legend>Sélectionnez une région</legend>
    <select name="rubrique" id="rubrique" onchange="changeDetailrubrique(tab,this.value);">
      <option value="vide">- - - Choisissez une rubrique - - -</option>
    <?php
    /* Construction de la première liste : on se sert du tableau PHP */
    $nbr = count($rubrique);
    foreach($rubrique 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="blocDetailrubrique"></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>

voila le code de arrayPHP2JS.php

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
159
/* Date de création: 24/03/2005 */
/**
* 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 enfin celui de changeDept.js

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 changeDetailrubrique(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="detailrubrique" id="detailrubrique">';
    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("blocDetailrubrique").innerHTML = form_d;
}

j'aimerais ne pas afficher un numéro entre parrenthèse dans la seconde liste déroulante, j'ai l'impression que c'est cette ligne mais je n'arrive pas a afficher la deuxieme liste quand je la modifie :
form_d += ' <option value="'+ tab[idr][1][j] +'">'+ tab[idr][2][j] +" ("+ tab[idr][1][j] +')<\/option>';
(elle provient du code ci-dessus)

Tu remplace ta ligne par :

Code:

1
2
 
 form_d += ' <option value="'+ tab[idr][1][j] +'">'+ tab[idr][2][j] + '<\/option>';

15/11/2005, 15h36
budiste

merci