Page 1 sur 1

3 listes déroulantes liées l'une a l'autre

Posté : 05 avr. 2012, 14:28
par miiidooo19
Bonjour a tous le monde

ce que je veux faire est pas nouveau ^^ une liste déroulante (region) une 2eme (Département) et une 3eme (ville)

le principe est claire au début je veux afficher que la liste des regions une fois on selection une region je veux afficher la 2eme liste déroulante (département)
et quand on selection une département je veux afficher la liste des ville je pense que c'est claire

voici le code (3 fichiers) pour faire la première partie que je veux (region -> département ) je l'ai trouvé sur internet maintent comment faire pour ajouter la 3eme liste des ville qui sera liée a celle des département ?

fichier index.php
<?php
	mysql_connect('localhost', 'root', '');
	 mysql_select_db('mvc');
?>

<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 = mysql_query("SELECT id_departement AS idd, departement AS dept, region.id_region AS idr, region 
								FROM departement, region 
								WHERE departement.id_region = region.id_region 
								ORDER BY region.id_region;")or die(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 */
    $regions = array();
	
    /* Index du département par tableau régional */
    $id = 0;

    while($ligne = mysql_fetch_assoc($sql))
    {
        $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)
        {
            $regions[$r] = array();
            /* J'ajoute laa région */
            $regions[$r][0] = $ligne['region'];
            $regions[$r][1] = array();
            $regions[$r][2] = array();
            $temoin_r = $r;
            $id = 0;
        }
        /* J'ajoute les départements */
        $regions[$r][1][$id] = $d;
        $regions[$r][2][$id] = $ligne['dept'];
        $id++;
    }
    /* On sérialise le tableau obtenu pour traitement par JavaScript */
    $chaine = htmlspecialchars(serialize($regions), ENT_QUOTES);
?>
<script type="text/javascript">
	var tableau = new PhpArray2Js('<?php echo $chaine; ?>');
	var tab = tableau.retour();
</script>


<?php
    echo '<select name="region" id="region" onchange="changeDept(tab,this.value);">
      <option value="vide">- - - Choisissez une région - - -</option>';
		$nbr = count($regions);
		foreach($regions as $nr => $nom)
		{
			echo '<option value="'.$nr.'">'.$nom[0].'</option>';
		}
    echo'</select><br />
		<span id="blocDepartements"></span><br />';
?>
fichier changeDept.js
[javascript]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 = '<select name="ville" id="ville">';
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("blocDepartements").innerHTML = form_d;
}[/javascript]

et pour finir voila le fichier arrayPHP2JS.js
[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]


Merci d'avance

PS: je donne script de bdd si c'est besoin

Re: 3 listes déroulantes liées l'une a l'autre

Posté : 07 avr. 2012, 19:02
par miiidooo19
personne n'a jamais utilisé cette technique ?

Re: 3 listes déroulantes liées l'une a l'autre

Posté : 07 avr. 2012, 19:09
par Ryle
Ben pour lier des listes, on utilise la technique donnée dans le forum FAQ qui contient des explications détaillées sur ce sujet :
:arrow: Formulaires : Listes déroulantes dynamiques liées

Vérifier dans la FAQ ou faire une petite recherche préalable n'est pas superflu ;)

Re: 3 listes déroulantes liées l'une a l'autre

Posté : 07 avr. 2012, 19:42
par miiidooo19
merci mais si dans ce sujet que j'ai pris le code que j'ai posté :s mais je veux ajouter une liste des villes parce que dans le topic y a que la liste des region + Departement c'est tt

Re: 3 listes déroulantes liées l'une a l'autre

Posté : 07 avr. 2012, 23:31
par Ryle
Ben c'est tout pareil... si tu sais faire une liste de région qui filtre une liste de départements, tu dois pouvoir faire une liste de départements qui filtre une liste de ville (suffit de reprendre le code et changer le nom des champs ;))

Et du coup, tu devrais facilement pouvoir faire une liste de région qui filtre une liste de départements, qui elle même filtrera ta liste de villes :)

Re: 3 listes déroulantes liées l'une a l'autre

Posté : 11 avr. 2012, 08:43
par miiidooo19
j'ai essayé tous ça avant de créer mon topic et ça marche pas

Re: 3 listes déroulantes liées l'une a l'autre

Posté : 12 févr. 2014, 11:23
par cris84
Bonjour à tous,
je fais suite à ce topic car je recherche la même chose.

Dans le tuto bien explicite on s'arrête à la sélection du département : faq-tutoriels/formulaires-listes-deroul ... t4562.html

Le question et donc de savoir comment lier une liste de villes avec le département une fois celui-ci sélectionné, le champ " choisissez une ville" s'affiche avec les villes correspondantes du département choisi. J'ai beaucoup recherché sur le net mais sans succès.

Merci de votre aide. :P