PHPfrance

la communauté d'entraide francophone dédiée au PHP

remplir une liste déroulante à partir d'une autre

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : remplir une liste déroulante à partir d'une autre

par sadeq » 16 janv. 2006, 10:59

Voici une méthode un peut complexe mais qui utilise Ajax pour mettre à jour des listes mise en relations.

La page principale est écrite en HTML/AJAX
Principal.HTM 
<script>
function ajax_Response(URL){
	if(window.XMLHttpRequest) // Hors IE
		xhr_object = new XMLHttpRequest();
	else if(window.ActiveXObject) // IE
			xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
		else
			return(false);
	//Ouvrir URL
	xhr_object.open("GET", URL, false);
	xhr_object.send(null);
	//Attendre la réponse
	if(xhr_object.readyState == 4) return(xhr_object.responseText);
	else return(false);
}

//Evénement "onChange" implémenté pour la liste
function liste_change(liste){
	if (liste){
		if (liste.name=="pays"){
			//Si la liste des pays est modifiée alors reconstruire les listes département et ville selon le pays choisi
			document.all["div_liste_departement"].innerHTML = ajax_Response ("http://localhost/test/bdd/liste.php?liste=departement&pays="+liste.value);
			document.all["div_liste_ville"].innerHTML = ajax_Response ("http://localhost/test/bdd/liste.php?liste=ville");
		}
		if (liste.name=="departement")
			//Si la liste des départements est modifiée alors reconstruire la liste ville selon le département choisi
			document.all["div_liste_ville"].innerHTML = ajax_Response ("http://localhost/test/bdd/liste.php?liste=ville&departement="+liste.value);
	}
	else {
		//Au démarrage aucune liste n'est modifiée : Construire alors les 3 listes (pays, département et ville)
		document.all["div_liste_pays"].innerHTML = ajax_Response ("http://localhost/test/bdd/liste.php?liste=pays");
		document.all["div_liste_departement"].innerHTML = ajax_Response ("http://localhost/test/bdd/liste.php?liste=departement");
		document.all["div_liste_ville"].innerHTML = ajax_Response ("http://localhost/test/bdd/liste.php?liste=ville");
	}
}
</script>

<body onLoad="liste_change(null); //Démarrage">
<p>Blabla
<p>Blabla
<p>Blabla
<Div id="div_liste_pays"></Div>
<p>Blabla
<p>Blabla
<p>Blabla
<p>Blabla
<Div id="div_liste_departement"></Div>
<p>Blabla
<p>Blabla
<p>Blabla
<p>Blabla
<Div id="div_liste_ville"></Div>
La page liste.php est le serveur de construction des listes HTML selon les choix effectués dans la page Principal.htm.

Ici la base de données est sous forme de tableaux pour simplifier l'exemple.

Liste.php 
<?php
extract ($_GET);

if ($liste == "pays"){
	//Liste des pays
	$pays = array ("1"=>"Pays 1","2"=>"Pays 2","3"=>"Pays 3");
	$titre = "Pays"; 
	$nom = "pays"; 
	$option_selectionnée = $_GET[pays]?$_GET[pays]:"1";
	//Affichage de la liste  
	liste($titre, $nom, $pays, $option_selectionnée); 
}

if ($liste == "departement"){
	//Liste des villes par pays
	switch ($_GET[pays]){
		case "1": $departements = array("1.1"=>"Département 1.1", "1.2"=>"Département 1.2", "1.3"=>"Département 1.3"); break;
		case "2": $departements = array("2.1"=>"Département 2.1", "2.2"=>"Département 2.2"); break;
		case "3": $departements = array("3.1"=>"Département 3.1", "3.2"=>"Département 3.2", "3.3"=>"Département 3.3", "3.4"=>"Département 3.4"); break;
		default : $departements = array("1.1"=>"Département 1.1", "1.2"=>"Département 1.2", "1.3"=>"Département 1.3"); break;
	}
	$titre = "Département"; 
	$nom = "departement"; 
	$option_selectionnée = $_GET[departement]?$_GET[departement]:"";
	//Affichage de la liste  
	liste($titre, $nom, $departements, $option_selectionnée);
}

if ($liste == "ville"){
	//Liste des villes par pays
	switch ($_GET[departement]){
		case "1.1": $villes = array("1.1.1"=>"Ville 1.1.1", "1.1.2"=>"Ville 1.1.2"); break;
		case "1.2": $villes = array("1.2.1"=>"Ville 1.2.1", "1.2.2"=>"Ville 1.2.2"); break;
		case "1.3": $villes = array("1.3.1"=>"Ville 1.3.1", "1.3.2"=>"Ville 1.3.2"); break;

		case "2.1": $villes = array("2.1.1"=>"Ville 2.1.1", "2.1.2"=>"Ville 2.1.2"); break;
		case "2.2": $villes = array("2.2.1"=>"Ville 2.2.1", "2.2.2"=>"Ville 2.2.2"); break;

		case "3.1": $villes = array("1.1.1"=>"Ville 3.1.1", "1.1.1"=>"Ville 3.1.2"); break;
		case "3.2": $villes = array("3.2.1"=>"Ville 3.2.1", "3.2.2"=>"Ville 3.2.2"); break;
		case "3.3": $villes = array("3.3.1"=>"Ville 3.3.1", "3.3.2"=>"Ville 3.3.2"); break;
		case "3.4": $villes = array("3.4.1"=>"Ville 3.4.1", "3.4.2"=>"Ville 3.4.2"); break;

		default : $villes = array("1.1.1"=>"Ville 1.1.1", "1.1.2"=>"Ville 1.1.2"); break;
	}
	$titre = "Ville"; 
	$nom = "ville"; 
	$option_selectionnée = $_GET[ville]?$_GET[ville]:"";
	//Affichage de la liste  
	liste($titre, $nom, $villes, $option_selectionnée);
}

//Code de construction d'un objet liste HTML
function liste($titre="Liste 1", $nom="Liste1", $options=array(), $option_selectionnée=""){ 
	echo "$titre <SELECT name=\"$nom\" onChange=\"liste_change(this);\"><OPTION value=\"\">---</OPTION>"; 
	if ($options) 
	foreach ($options as $valeur=>$texte) 
		echo "<OPTION value=\"$valeur\"".($valeur==$option_selectionnée?" SELECTED ":"").">$texte</OPTION>"; 
	echo "</SELECT>"; 
}
?>

par ryanu » 13 janv. 2006, 16:57

Oui :wink:

par Cyrano » 13 janv. 2006, 15:53

On peut mettre le [Résolu] peut-être ?

par ryanu » 13 janv. 2006, 15:42

Youpi ça marche ! \:D/
Un grand grand merci pour ta rapidité à me répondre. :merci:

par Cyrano » 13 janv. 2006, 15:08

Il faudrait surtout faire un code valide: tu as un paquet d'accolades orphelines : ton code devrait ressembler davantage à ceci: 
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  = '<input type="text" name="departement" size="70" maxlength="70"  ';
        for(var j = 0;  j < nbd; j++)
        {
            form_d += '  value="'+ tab[idr][2][j] +'" ';
            form_d += '>';
            form_d += '<input type="text" name="ville" size="10" maxlength="10"  ';
            form_d += '  value="'+ tab[idr][3][j] +'" ';
            form_d += '>';
        }
    }
    else
    {
        form_d = "";
    }
    document.getElementById("blocDepartements").innerHTML = form_d;
}

par ryanu » 13 janv. 2006, 14:12

Ca m'embête de te demander ça mais est-ce que tu pourrais m'aider plus précisément car je patauge.
La liste que je veux ajouter correspond au champs Ville de ma table Département.

Donc j'ai modifié ma fonction ChangeDept ainsi :
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  = '<input type="text" name="departement" size="70" maxlength="70"  '; 
 for(var j = 0;  j < nbd; j++) 
    { 
        form_d += '  value="'+ tab[idr][2][j] +'" '; 
    } 
	{
        form_d += '>'; 
    } 
	{ 
        form_d += '<input type="text" name="ville" size="10" maxlength="10"  ';
	 } 
	{ 
		form_d += '  value="'+ tab[idr][3][j] +'" '; 
    } 
	{ 
        form_d += '>'; 
    } 
    else 
    { 
        form_d = ""; 
    } 
    document.getElementById("blocDepartements").innerHTML = form_d;     	
}



Faut-il modifier le tableau PHP ?

par Cyrano » 13 janv. 2006, 13:01

Alors c'est plus simple: là où le code fait afficher une liste, il te suffit de rajouter une ligne d'instruction pour faire également afficher la seconde liste dans l'autre bloc span.

par ryanu » 13 janv. 2006, 12:57

Je viens de consulter ce lien mais comme je nage complètement en javascript, je ne sais pas comment l'appliquer à mon cas. Est-ce que dans le fichier ChangeDept.js je dois rajouter une fonction pour afficher un 2ème bloc <span> ?

En fait je ne cherche pas à faire des listes en cascade. Je veux qu'en sélectionnant une région il y ait 2 listes qui s'affichent (2 blocs <span>).
Donc l'utilisateur ne doit pas cliquer dans la liste département pour faire afficher la 3ème liste ...
C'est compliqué mais c'est une exigence de mon patron. :evil:

par Cyrano » 13 janv. 2006, 10:54

Oui, c'est possible, pas évident parce que le tableau à sérializer est plus complexe qu'avec deux listes, mais techniquement, c'est faisable.

Ceci dit, as-tu suivi le lien vers le site aidejavascript.com sur les listes fantôme : il y a des explications sur les bases afin de rajouter davantage de listes.

par ryanu » 13 janv. 2006, 10:46

S'il vous plait dites moi que c'est possible avec la version javascript :?

par ryanu » 12 janv. 2006, 13:09

La version Javascript.

par Cyrano » 12 janv. 2006, 11:15

Tu utilises la version 100%PHP ou la version JavaScript ?

par ryanu » 12 janv. 2006, 11:01

En suivant le tutoriel ça marche impeccable.
mais je voudrais qu'en cliquant sur un des éléments de ma liste "région", que, en plus de la liste "département", une troisième liste s'affiche en même temps.
J'ai du mal en Javascript et mes essais jusqu'ici sont infructueux.
Merci

par ryanu » 16 déc. 2005, 13:01

Ok je me mets au boulot :wink:

par mere-teresa » 16 déc. 2005, 12:14

Franchement, je ne lirai pas cette tartine de code. Mais quitte à reprendre le code de qqn d'autre, autant que ce soit avec des explications, non ?

Le tuto => http://www.phpfrance.com/forums/voir_sujet-4562.php