problème de deux listes dynamiques avec js
Posté : 19 mai 2012, 23:53
bonjour,
je suis débutant et je souhaite créer deux listes dynamiques, en fonction de la sélection dans la première liste,la deuxième se met à jour et son contenu s'affiche dans un tableau; par exemple quand je choisie un parfumeur dans la première liste, les parfums du parfumeur sélectionné s'affiche dans la deuxième liste et puis en dessous ses parfums s'affichent sous forme d'un tableau.
j'ai suivi un tutorial que j'ai adapté mais le résultat n'est pas très concluant; la première liste s'alimente mais pas la deuxième:
voici mon code:
premier fichier intitulé arrayPHP2JS.js
[javascript]
/**
* 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] : "") + "}";
}[/javascript]
deuxième fichier intitulé changeDept.js
[javascript]/* On crée la fonction qui va construire la seconde liste déroulante */
function changeDept(tab,idparfumeurr)
{
if(idparfumeur != "vide")
{
/* On compte les parfums de ce parfumeur */
var nbd = tab[idparfumeur][1].length;
var form_d = '<select name="parfum" id="parfum">';
for(var j = 0; j < nbd; j++)
{
form_d += ' <option value="'+ tab[idparfumeur][1][j] +'">'+ tab[idparfumeur][2][j] +" ("+ tab[idparfumeur][1][j] +')<\/option>';
}
form_d += '<\/select>';
}
else
{
form_d = "";
}
document.getElementById("blocDepartements").innerHTML = form_d;
}
[/javascript]
3ième et dernier fichier intitulé index2.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 = "mesparfums";
?>
<!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 parfum.Code AS idparfum, parfum.Nom AS parf, parfumeur.Code AS idparfumeur, parfumeur.Nom AS parfumeur FROM parfumeur, parfum WHERE parfum.Code_Parfumeur = parfumeur.Code ORDER BY parfumeur.Code;";
/* 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)or die ("Pb requette ".mysql_error());
/* 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 */
$parfumeurs = array();
/* Index du département par tableau régional */
$id = 0;
while($ligne = mysql_fetch_assoc($recherche))
{
$r = $ligne['idparfumeur'];
$d = $ligne['idparfum'];
/* 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)
{
$parfumeurs[$r] = array();
/* J'ajoute le parfumeur */
$parfumeurs[$r][0] = $ligne['parfumeur'];
$parfumeurs[$r][1] = array();
$parfumeurs[$r][2] = array();
$temoin_r = $r;
$id = 0;
//echo("parfumeur:");
//echo($temoin_r);
}
/* J'ajoute les parfums */
//echo("parfum:");
//echo($d[0]);
//echo("x");
$parfumeurs[$r][1][$id] = $d;
$parfumeurs[$r][2][$id] = $ligne['parf'];
$id++;
}
/* On sérialise le tableau obtenu pour traitement par JavaScript */
$chaine = htmlspecialchars(serialize($parfumeurs), 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%">
<?php
if(isset($_POST['ok']) && isset($_POST['parfum.Nom']) && $_POST['parfum.Nom'] != "")
{
$parfumeur_selectionne = $_POST['parfumeur'];
$parfum_selectionne = $_POST['parfum.Nom'];
?>
<p>Vous avez sélectionné le parfum <?php echo($parfum_selectionne); ?> du parfumeurn <?php echo($parfumeur_selectionne); ?></p>
<?php
}
?>
<form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" id="chgdept">
<fieldset style="border: 3px double #333399">
<legend>Sélectionnez un Parfumeur</legend>
<select name="parfum" id="parfum" 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($parfumeurs);
foreach($parfumeurs as $nr => $nom)
{echo($nr);
?>
<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> </p>
</body>
</html>
je suis débutant et je souhaite créer deux listes dynamiques, en fonction de la sélection dans la première liste,la deuxième se met à jour et son contenu s'affiche dans un tableau; par exemple quand je choisie un parfumeur dans la première liste, les parfums du parfumeur sélectionné s'affiche dans la deuxième liste et puis en dessous ses parfums s'affichent sous forme d'un tableau.
j'ai suivi un tutorial que j'ai adapté mais le résultat n'est pas très concluant; la première liste s'alimente mais pas la deuxième:
voici mon code:
premier fichier intitulé arrayPHP2JS.js
[javascript]
/**
* 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] : "") + "}";
}[/javascript]
deuxième fichier intitulé changeDept.js
[javascript]/* On crée la fonction qui va construire la seconde liste déroulante */
function changeDept(tab,idparfumeurr)
{
if(idparfumeur != "vide")
{
/* On compte les parfums de ce parfumeur */
var nbd = tab[idparfumeur][1].length;
var form_d = '<select name="parfum" id="parfum">';
for(var j = 0; j < nbd; j++)
{
form_d += ' <option value="'+ tab[idparfumeur][1][j] +'">'+ tab[idparfumeur][2][j] +" ("+ tab[idparfumeur][1][j] +')<\/option>';
}
form_d += '<\/select>';
}
else
{
form_d = "";
}
document.getElementById("blocDepartements").innerHTML = form_d;
}
[/javascript]
3ième et dernier fichier intitulé index2.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 = "mesparfums";
?>
<!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 parfum.Code AS idparfum, parfum.Nom AS parf, parfumeur.Code AS idparfumeur, parfumeur.Nom AS parfumeur FROM parfumeur, parfum WHERE parfum.Code_Parfumeur = parfumeur.Code ORDER BY parfumeur.Code;";
/* 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)or die ("Pb requette ".mysql_error());
/* 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 */
$parfumeurs = array();
/* Index du département par tableau régional */
$id = 0;
while($ligne = mysql_fetch_assoc($recherche))
{
$r = $ligne['idparfumeur'];
$d = $ligne['idparfum'];
/* 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)
{
$parfumeurs[$r] = array();
/* J'ajoute le parfumeur */
$parfumeurs[$r][0] = $ligne['parfumeur'];
$parfumeurs[$r][1] = array();
$parfumeurs[$r][2] = array();
$temoin_r = $r;
$id = 0;
//echo("parfumeur:");
//echo($temoin_r);
}
/* J'ajoute les parfums */
//echo("parfum:");
//echo($d[0]);
//echo("x");
$parfumeurs[$r][1][$id] = $d;
$parfumeurs[$r][2][$id] = $ligne['parf'];
$id++;
}
/* On sérialise le tableau obtenu pour traitement par JavaScript */
$chaine = htmlspecialchars(serialize($parfumeurs), 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%">
<?php
if(isset($_POST['ok']) && isset($_POST['parfum.Nom']) && $_POST['parfum.Nom'] != "")
{
$parfumeur_selectionne = $_POST['parfumeur'];
$parfum_selectionne = $_POST['parfum.Nom'];
?>
<p>Vous avez sélectionné le parfum <?php echo($parfum_selectionne); ?> du parfumeurn <?php echo($parfumeur_selectionne); ?></p>
<?php
}
?>
<form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" id="chgdept">
<fieldset style="border: 3px double #333399">
<legend>Sélectionnez un Parfumeur</legend>
<select name="parfum" id="parfum" 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($parfumeurs);
foreach($parfumeurs as $nr => $nom)
{echo($nr);
?>
<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> </p>
</body>
</html>
