Listes déroulantes dynamiques inter-dépendantes

par **Cyrano** » 27 sept. 2005, 13:11

Ben voilà

Ça fonctionne ?

par **arentx** » 27 sept. 2005, 12:59

Saloutche ben voila apres 3 nuits voila il faud juste ajouter une table "ville" avec des champs "id" en auto_incremente, un "intitule" en texte avec le nom des villes, un "id_dept" qui correspond a l "id_departement", un "cp" qui correspond au code postal.

Ensuite j ai modifié la direction du bouton vers un fichier "ville.php" avec la variable 'id" de la ville qui s'affiche dans l url (ex: ville.php?id=29243)

Comme ca on peut afficher des infos correspondant a cette variable.

Voila c'est

<?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   = "*******";
$mdp     = "******";
$base    = "******";
/* 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;
$dept_selectionne = isset($_POST['departement'])?$_POST['departement']:null;
$ville_selectionne = isset($_POST['ville'])?$_POST['ville']: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%">
<h3>Version 100% PHP by Xavier </h3>
<p>Vous constaterez qu'il y a un délai de latence entre la sélection et la mise à jour.</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
}
?>
<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 `id_region`, `region`".
    " FROM `region`".
    " ORDER BY `id_region`";
    $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['id_region']);
            array_push($region, $ligne['region']);
            /* 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 `id_departement`, `departement`".
        " FROM `departement`".
        " WHERE `id_region` = ". $idr ."".
        " ORDER BY `id_departement`;";
        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['id_departement']);
                array_push($nom_dept, $ligne_dept['departement']);
                $nd++;
            }
            /* Maintenant on peut construire la liste déroulante */
            ?>
<select name="departement" id="departement" onchange="document.forms['chgdept'].submit();">
           <option value="-1">---Choix de dept---</option> 
		   <?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
            }
?>
</select>
<?php
        }
        /* Un petit coup de balai */
        mysql_free_result($rech_dept);
    }
	
	if(isset($dept_selectionne))
    {
        /* Création de la requête pour avoir les villes de ce dept */
        $sql3 = "SELECT `id`, `intitule`, `cp`".
        " FROM `ville`".
        " WHERE `id_dept` = ". $dept_selectionne ."".
        " ORDER BY `intitule`;";
        if($connexion != false)
        {
            $rech_ville = mysql_query($sql3, $connexion);
            /* Un petit compteur pour les villes */
            $nv = 0;
            /* On crée deux tableaux pour les numéros et les codes postaux */
            $code_ville = array();
            $nom_ville = array();
			$id_ville = array();
            /* On va mettre les CP et noms des villes dans les deux tableaux */
            while($ligne_ville = mysql_fetch_assoc($rech_ville))
            {
                array_push($code_ville, $ligne_ville['cp']);
                array_push($nom_ville, $ligne_ville['intitule']);
				array_push($id_ville,  $ligne_ville['id']);
                $nv++;
            }
            /* Maintenant on peut construire la liste déroulante */
            ?>
<select name="ville" id="ville"  onchange="document.forms['chgdept'].submit();">
           <option value="-1">---Choix des villes---</option> 
            <?php  
            for($v = 0; $v<$nv; $v++)
            {
                ?>
  <option value="<?php echo($id_ville[$v]); ?>"<?php echo((isset($ville_selectionne) && $ville_selectionne == $id_ville[$v])?" selected=\"selected\"":null); ?>><?php echo($nom_ville[$v]." (". $code_ville[$v] .")"); ?></option>
                <?php
            }
?>
</select>
<?php
        }
        /* Un petit coup de balai */
        mysql_free_result($rech_ville);
    }
	
	if(isset($ville_selectionne))
	{
		//echo '<a href="ville.php?id='.$ville_selectionne.'">voir les infos de la ville</a>';
		echo '<input type="button" name="ok" value="Envoyer" onClick="javascript:window.open(\'ville.php?id='.$ville_selectionne.'\')">';
	}
	
?>
<br/>
</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
}
?>
<p><a href="./index2.php" title="Aller vers la version JavaScript">Aller vers la version JavaScript</a></p>
</body>
</html>

par **Cyrano** » 26 sept. 2005, 22:18

On va y arriver effectivement: mais ce n'est pas moi qui veux ça: c'est une méthode que je te suggère pour l'avoir pratiquée longtemps et pour la pratiquer encore.

En fait c'est très simple. Je détermine ce que je veux obtenir et je construis la maquette de ce résultat recherché tout en sachant que pour les besoins du moment, je vais mettre des valeurs bidons juste pour meubler et ajuster l'affichage de la page.

Quand cette page est prête, je peux découper les parties dont j'ai besoin : l'en-tête de la page, le menu de navigation, le contenu, le pied de page. Restons-en au contenu : dans le cas qui nous occupe, il s'agit de trois listes déroulantes, la seconde dépendant de la première et la troisième dépendant de la seconde. Dans la maquette, elles s'affichent toutes les trois, c'est normal, c'est le but recherché. Mais maintenant, pour développer, j'ai les éléments html dont je n'aurai plus à m'occuper autrement que pour y insérer le contenu dynamique.

à partir de là, je peux commencer à développer l'alogorithme qui va faire en sorte qu'au départ, je ne verrai que la première liste. J'insère les éléments et instructions nécessaires pour l'affichage de la seconde au changement de sélection dans la première. Quand ça fonctionne, je continue en ajoutant encore des éléemtns pour faire afficher la troisième au changement de sélection dans la seconde.

Mais en tout état de cause, je ne fais pas en même temps du HTMl et du PHP : je fais d'abord le HTML et après seulement je fais du PHP sur la base des éléments HTML développé auparavant. Comme ça, je suis certain d'obtenir le résultat voulu.

Est-ce que tu comprends mieux mon système expliqué comme ça ?

par **arentx** » 26 sept. 2005, 08:48

Code : Tout sélectionner

<form name="form1">
  <select name="region" method="post" action="">
    <option selected>--- Choisissez une région ---</option>
    <option>PACA</option>
  </select>
</form>
<form name="form2">
  <select name="departement" method="post" action="">
    <option selected>--- Choisissez un département ---</option>
    <option>VAR</option>
  </select>
</form>
<form name="form3">
  <select name="ville" method="post" action="">
    <option selected>--- Choisissez une ville ---</option>
    <option>TOULON</option>
  </select>
</form>

c'est ca que tu veux

par **Cyrano** » 25 sept. 2005, 22:14

Fais donc ce que je t'ai conseillé : crée une page html avec tes trois listes déroulantes, t'occupes pas trop des valeurs contenues dans les listes, c'est juste pour avoir le code HTML complet de la page sans PHP pour le moment.

Quand tu auras fait ça, ce sera un premier point de gagné: tu pourras procéder à un découpage logique. Tu n'avanceras à rien autrement de la manière dont c'est parti.

par **arentx** » 25 sept. 2005, 22:12

Si quelqu'un c'est m integrer une troisieme boite avec les villes ...
MERCI

par **arentx** » 25 sept. 2005, 20:13

je cromprends rien ...
Merci quand meme pour ton aide mais là ... ca chauffe dans la boite a cerveau!!

par **Cyrano** » 25 sept. 2005, 19:08

mdrr, je l'attendais bien celle là

Bon, je regardais ton code pendant que tu postais, j'ai relevé autre chose qui me montre que tu n'as pas bien interprété un point:

           /* Maintenant on peut construire la liste déroulante */
            ?>
<select name="departement" id="departement" onchange="document.forms['chgville'].submit();">
  <option value="-1">- - - Choisissez un d&eacute;partement - - -</option>
  <option value="<?php echo($code_dept[$d]); ?>"><?php echo($nom_dept[$d]." (". $code_dept[$d] .")"); ?></option>

Deux erreurs ici:
- d'abord, tu as inscrit "document.forms['chgville'].submit();" : C'est quoi le chgville que tu as mis ? Ça ne doit pas changer, c'est le nom du formulaire (Attribut id)
- Ensuite, tu mets l'affichage du contenu de la balise <option> en caractères spéciaux, à l'affichage, ça n'interpètera rien tu tout et ça va être affiché en code PHP dans la page. :
ça devrait donc être:

/* Maintenant on peut construire la liste déroulante */
            ?>
<select name="departement" id="departement" onchange="document.forms['chgdept'].submit();">
  <option value="-1">- - - Choisissez un d&eacute;partement - - -</option>
  <option value="<?php echo($code_dept[$d]); ?>"><?php echo($nom_dept[$d]." (". $code_dept[$d] .")"); ?></option>

Mais même là, ça ne marche pas: tu affiche le code du département alors que, si j'ai correctement compris ton message d'origine, tu veux la liste des villes: où est le code qui crée la requête pour chercher les villes correspondant au département sélectionné ?

par **arentx** » 25 sept. 2005, 18:56

tu ne peux pas simplement m'integrer "ville" svp ??

par **Cyrano** » 25 sept. 2005, 18:51

D'abord, je ne vois nulle part le code permettant de rajouter une liste des villes. Ensuite tu travailles à l'envers. Commence donc par te faire une maquette 100% html de ce que tu veux obtenir, éventuellement en te basant sur la source de mon code. Quand tu auras ça, tu auras les éléments nécessaires pour un découpage logique, c'est à dire que tu auras chaque liste qui n'apparaîtra qu'à certaines conditions et après certaines actions. Partant de là, en prenant en plus mon petit algo en pseudo-code de tout à l'heure, tu vas pouvoir définir les structures de contrôle et créer les requêtes.

Là pour le moment, tu essaye d'intégrer des bouts de code en essayant de pas casser ce qui marche, c'est sûr que tu vas te planter.

par **arentx** » 25 sept. 2005, 18:08

alors je recommence comme ca ...

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 = "localhost";
$admin   = "root";
$mdp     = "";
$base    = "xavier";
/* 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%">
<h3>Version 100% PHP</h3>
<p>Vous constaterez qu'il y a un délai de latence entre la sélection et la mise à jour.</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
}
?>
<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 `id_region`, `region`".
    " FROM `region`".
    " ORDER BY `id_region`";
    $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['id_region']);
            array_push($region, $ligne['region']);
            /* 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 `id_departement`, `departement`".
        " FROM `departement`".
        " WHERE `id_region` = ". $idr ."".
        " ORDER BY `id_departement`;";
        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['id_departement']);
                array_push($nom_dept, $ligne_dept['departement']);
                $nd++;
            }
            /* Maintenant on peut construire la liste déroulante */
            ?>
<select name="departement" id="departement" onchange="document.forms['chgville'].submit();">
  <option value="-1">- - - Choisissez un d&eacute;partement - - -</option>
  <option value="<?php echo($code_dept[$d]); ?>"><?php echo($nom_dept[$d]." (". $code_dept[$d] .")"); ?></option>
            <?php  
            for($d = 0; $d<$nd; $d++)
            {
                ?>
                <?php
            }
?>
</select>
<?php
        }
        /* Un petit coup de balai */
        mysql_free_result($rech_dept);
    }
?>
<br /><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
}
?>
<p><a href="./index2.php" title="Aller vers la version JavaScript">Aller vers la version JavaScript</a></p>
</body>
</html>

mais maintenant il ne m affiche plus les departement

par **Cyrano** » 25 sept. 2005, 17:35

Tu ne remplaces rien du tout: tu dois ajouter des structures de contrôle et insérer un nouveau code de ce style pour rechercher les villes, mais en te basant non sur l'id de la région mais celui du département sélectionné.

Sommairement en pseudo-code :

Code : Tout sélectionner

Si le bouton envoi a été cliqué
{
  Si un département a été sélectionné
  {
    Affichage formulaire Région + Départements + Ville
  }
  Sinon
  {
    affichage du formulaire Régions + Département correspondants
  }
}
Sinon
{
  affichage du formulaire régions seulement
}

par **arentx** » 25 sept. 2005, 17:19

alors si je comprends bien il faut que je modifie ca

Code : Tout sélectionner

<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 `id_departement`, `departement`".
        " FROM `departement`".
        " WHERE `id_region` = ". $idr ."".
        " ORDER BY `id_departement`;";
        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['id_departement']);
                array_push($nom_dept, $ligne_dept['departement']);
                $nd++;
            }
            /* Maintenant on peut construire la liste déroulante */
            ?>
<select name="departement" id="departement">
            <?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
            }
?>
</select>
<?php
        }
        /* Un petit coup de balai */
        mysql_free_result($rech_dept);
    }
?>
<br /><input type="submit" name="ok" id="ok" value="Envoyer" />
</fieldset>
</form>

en remplacant les "regions" par "departement" et les "depatement" "dept" par "ville" "vil"

c'est ca ?

par **Cyrano** » 25 sept. 2005, 17:11

Bon, comprends bien le principe de base. Quand tu affiches la page, tu as seulement la liste des régions. Tu sélectionnes une région et tu envoies. Au rechargement, le script intercepte le click sur le bouton d'envoi et récupère la valeur sélectionnée : avec cette valeur, la requête pour lister les départements va être créée et la liste des départements de la région choisie va être générée puis affichée.

Si tu as bien compris ce principe, alors tu as compris comment faire pour la ville. Tu te retrouves avec un formulaire comportant deux listes : la région et le département. En sélectionnant le département, le même processus va se dérouler et l'évènement va être intercepté pour générer la requête pour lister les villes du département sélectionné.

Est-ce que ça va jusque là ?

par **arentx** » 25 sept. 2005, 17:04

comprends pas ?

en plus il ne me met pas "--- choisissez departement ---"

Listes déroulantes dynamiques inter-dépendantes

Répondre

Étendre la vue Revue du sujet : Listes déroulantes dynamiques inter-dépendantes