Listes déroulante lièes dynamiquement
Posté : 23 janv. 2012, 13:49
Ma page est celle-ci, j'arrive a afficher une liste ville connecté avec une liste departement, j'arrive aussi à ajouter un clone de la liste ville, mais dès que je séléctionne la 1ere liste, les autres listes déja ajouter disparaissent, j'aimerai bien que toutes les listes ajouter rèstent afficher dans ma page même après la séléctyion de la premières listes (departement) ou la 2eme, ect...
Quelqu'un à une idée ou soulution et merci.
Voici tout le code de ma page :
<?php
echo("<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n");
/* Variables de connexion : ajustez ces paramètres selon votre propre environnement */
$serveur = "mysql51-46.bdb";
$admin = "mylunchbspidf";
$mdp = "bspidf2206";
$base = "mylunchbspidf";
/* On récupère si elle existe la valeur de la région envoyée par le formulaire */
$idr = isset($_POST['region'])?$_POST['region']:null;
?>
<!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>Sélectionner un département selon la région choisie</title>
<meta name="description" content="Listes déroulantes dynamiques inter-dépendantes" />
<meta name="keywords" content="" />
<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" />
</head>
<body style="font-family: verdana, helvetica, sans-serif; font-size: 85%">
<?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
}
?>
<h3>Trouver un département</h3>
<?php
/* On établit la connexion à MySQL avec mysql_pconnect() plutôt qu'avec mysql_connect()
* car on aura besoin de la connexion un peu plus loin dans le script */
$connexion = mysql_pconnect($serveur, $admin, $mdp);
if($connexion != false)
{
$choixbase = mysql_select_db($base, $connexion);
$sql1 = "SELECT `IdDept`, `NomDept`".
" FROM `departement`".
" ORDER BY `IdDept`";
$rech_regions = mysql_query($sql1);
$code_region = array();
$region = array();
/* On active un compteur pour les régions */
$nb_regions = 0;
if($rech_regions != false)
{
while($ligne = mysql_fetch_assoc($rech_regions))
{
array_push($code_region, $ligne['IdDept']);
array_push($region, $ligne['NomDept']);
/* On incrémente de compteur */
$nb_regions++;
}
}
?>
<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="document.forms['chgdept'].submit();">
<option value="-1">- - - Choisissez une région - - -</option>
<?php
for($i = 0; $i < $nb_regions; $i++)
{
?>
<option value="<?php echo($code_region[$i]); ?>"<?php echo((isset($idr) && $idr == $code_region[$i])?" selected=\"selected\"":null); ?>><?php echo($region[$i]); ?></option>
<?php
}
?>
</select>
<?php
mysql_free_result($rech_regions);
/* On commence par vérifier si on a envoyé un numéro de région et le cas échéant s'il est différent de -1 */
if(isset($idr) && $idr != -1)
{
/* Cération de la requête pour avoir les départements de cette région */
$sql2 = "SELECT `IdVille`, `NomVille`".
" FROM `ville`".
" WHERE `IdDept` = ". $idr ."".
" ORDER BY `IdVille`;";
if($connexion != false)
{
$rech_dept = mysql_query($sql2, $connexion);
/* Un petit compteur pour les départements */
$nd = 0;
/* On crée deux tableaux pour les numéros et les noms des départements */
$code_dept = array();
$nom_dept = array();
/* On va mettre les numéros et noms des départements dans les deux tableaux */
while($ligne_dept = mysql_fetch_assoc($rech_dept))
{
array_push($code_dept, $ligne_dept['IdVille']);
array_push($nom_dept, $ligne_dept['NomVille']);
$nd++;
}
/* Maintenant on peut construire la liste déroulante */
?>
<script language="javascript">
var i=0;
function addSelect()
{
i++;
// On récupère l'endroit où devra être ajouté la liste
var divCible = document.getElementById("divCible");
// On récupère la liste modèle
var selModele = document.getElementById("departement");
// On la clone dans une nouvelle variable
var nvxSel = selModele.cloneNode(true);
// (pour la présentation, on crée un retour à la ligne)
var br = document.createElement("br");
// On adapte les attributs de la nouvelle liste : nom, id et affichage
nvxSel.name = "select" + i;
nvxSel.id = "select" + i;
nvxSel.style.display = "inline";
// On ajoute tout ça à l'emplacement voulu
divCible.appendChild(nvxSel);
divCible.appendChild(br);
}
</script>
<!-- Création d'une liste modèle, qui ne sera pas visible -->
<?php
echo "<select id=\"departement\" name=\"departement\" \"onclick = copie(this)\" >"; ?>
<?php
for($d = 0; $d<$nd; $d++)
{
?>
<option value="<?php echo($code_dept[$d]); ?>"<?php echo((isset($dept_selectionne) && $dept_selectionne == $code_dept[$d])?" selected=\"selected\"":null); ?>><?php echo($nom_dept[$d]." (". $code_dept[$d] .")"); ?></option>
<?php
}
echo "</select>";?>
<div id="divCible"></div>
<button onclick="javascript:addSelect();" type="button">Ajouter Liste</button>
<?php
}
/* Un petit coup de balai */
mysql_free_result($rech_dept);
}
?>
<input type="submit" name="ok" id="ok" value="Envoyer" />
</fieldset>
</form>
<?php
/* Terminé, on ferme la connexion */
mysql_close($connexion);
}
else
{
/* Si on arrive là, c'est pas bon signe, il faut vérifier les
* paramètres de connexion, mot de passe, serveur pas démarré etc... */
?>
<p>Un incident s'est produit lors de la connexion à la base de données, veuiillez essayer à nouveau ultérieurement.</p>
<?php
}
?>
</body>
</html>
Quelqu'un à une idée ou soulution et merci.
Voici tout le code de ma page :
<?php
echo("<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n");
/* Variables de connexion : ajustez ces paramètres selon votre propre environnement */
$serveur = "mysql51-46.bdb";
$admin = "mylunchbspidf";
$mdp = "bspidf2206";
$base = "mylunchbspidf";
/* On récupère si elle existe la valeur de la région envoyée par le formulaire */
$idr = isset($_POST['region'])?$_POST['region']:null;
?>
<!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>Sélectionner un département selon la région choisie</title>
<meta name="description" content="Listes déroulantes dynamiques inter-dépendantes" />
<meta name="keywords" content="" />
<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" />
</head>
<body style="font-family: verdana, helvetica, sans-serif; font-size: 85%">
<?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
}
?>
<h3>Trouver un département</h3>
<?php
/* On établit la connexion à MySQL avec mysql_pconnect() plutôt qu'avec mysql_connect()
* car on aura besoin de la connexion un peu plus loin dans le script */
$connexion = mysql_pconnect($serveur, $admin, $mdp);
if($connexion != false)
{
$choixbase = mysql_select_db($base, $connexion);
$sql1 = "SELECT `IdDept`, `NomDept`".
" FROM `departement`".
" ORDER BY `IdDept`";
$rech_regions = mysql_query($sql1);
$code_region = array();
$region = array();
/* On active un compteur pour les régions */
$nb_regions = 0;
if($rech_regions != false)
{
while($ligne = mysql_fetch_assoc($rech_regions))
{
array_push($code_region, $ligne['IdDept']);
array_push($region, $ligne['NomDept']);
/* On incrémente de compteur */
$nb_regions++;
}
}
?>
<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="document.forms['chgdept'].submit();">
<option value="-1">- - - Choisissez une région - - -</option>
<?php
for($i = 0; $i < $nb_regions; $i++)
{
?>
<option value="<?php echo($code_region[$i]); ?>"<?php echo((isset($idr) && $idr == $code_region[$i])?" selected=\"selected\"":null); ?>><?php echo($region[$i]); ?></option>
<?php
}
?>
</select>
<?php
mysql_free_result($rech_regions);
/* On commence par vérifier si on a envoyé un numéro de région et le cas échéant s'il est différent de -1 */
if(isset($idr) && $idr != -1)
{
/* Cération de la requête pour avoir les départements de cette région */
$sql2 = "SELECT `IdVille`, `NomVille`".
" FROM `ville`".
" WHERE `IdDept` = ". $idr ."".
" ORDER BY `IdVille`;";
if($connexion != false)
{
$rech_dept = mysql_query($sql2, $connexion);
/* Un petit compteur pour les départements */
$nd = 0;
/* On crée deux tableaux pour les numéros et les noms des départements */
$code_dept = array();
$nom_dept = array();
/* On va mettre les numéros et noms des départements dans les deux tableaux */
while($ligne_dept = mysql_fetch_assoc($rech_dept))
{
array_push($code_dept, $ligne_dept['IdVille']);
array_push($nom_dept, $ligne_dept['NomVille']);
$nd++;
}
/* Maintenant on peut construire la liste déroulante */
?>
<script language="javascript">
var i=0;
function addSelect()
{
i++;
// On récupère l'endroit où devra être ajouté la liste
var divCible = document.getElementById("divCible");
// On récupère la liste modèle
var selModele = document.getElementById("departement");
// On la clone dans une nouvelle variable
var nvxSel = selModele.cloneNode(true);
// (pour la présentation, on crée un retour à la ligne)
var br = document.createElement("br");
// On adapte les attributs de la nouvelle liste : nom, id et affichage
nvxSel.name = "select" + i;
nvxSel.id = "select" + i;
nvxSel.style.display = "inline";
// On ajoute tout ça à l'emplacement voulu
divCible.appendChild(nvxSel);
divCible.appendChild(br);
}
</script>
<!-- Création d'une liste modèle, qui ne sera pas visible -->
<?php
echo "<select id=\"departement\" name=\"departement\" \"onclick = copie(this)\" >"; ?>
<?php
for($d = 0; $d<$nd; $d++)
{
?>
<option value="<?php echo($code_dept[$d]); ?>"<?php echo((isset($dept_selectionne) && $dept_selectionne == $code_dept[$d])?" selected=\"selected\"":null); ?>><?php echo($nom_dept[$d]." (". $code_dept[$d] .")"); ?></option>
<?php
}
echo "</select>";?>
<div id="divCible"></div>
<button onclick="javascript:addSelect();" type="button">Ajouter Liste</button>
<?php
}
/* Un petit coup de balai */
mysql_free_result($rech_dept);
}
?>
<input type="submit" name="ok" id="ok" value="Envoyer" />
</fieldset>
</form>
<?php
/* Terminé, on ferme la connexion */
mysql_close($connexion);
}
else
{
/* Si on arrive là, c'est pas bon signe, il faut vérifier les
* paramètres de connexion, mot de passe, serveur pas démarré etc... */
?>
<p>Un incident s'est produit lors de la connexion à la base de données, veuiillez essayer à nouveau ultérieurement.</p>
<?php
}
?>
</body>
</html>