Discussion :

[za3zou3TN]

Bonjour à tous;

En PHP5, je souhaite afficher le contenu d'une liste déroulante qui dépend d'une autre liste que l'utilisateur doit choisir l'option en 1er lieu:
En effet dans mon site, l'utilisateur doit choisir sa Gouvernorat puis sa Localité qui dépend du gouvernorat.
Actuellement chacune est indépendante de l'autre comment faire la liaison lors du choix??

merci d'avance

[rawsrc]

Bonjour

un petit tuto sur les listes liées par ici

[za3zou3TN]

merci bien,

c'est tout a fait ce que je veux,
sauf que je souhaite chercher une solution developpée avec uniquement du PHP/HTML/HTML 5; sans requis à AJAX/JQuerry....
(j'ai déjà fait la verification des formulaires avec que du PHP)

[kalimukti]

sauf que je souhaite chercher une solution developpée avec uniquement du PHP/HTML/HTML 5; sans requis à AJAX/JQuerry....

Que du php/html même 5 pour un comportement dynamique côté client (c'est une entrée côté client qui modifie la page côté client), ça me paraît difficile, vu qu'il n'y a que javascript pour capter des événements type selection d'un choix dans la liste et pour modifier à la volée une liste déroulante.
Tu pourrais considérer que le chargement du contenu de la deuxième liste se fasse par rechargement de la page, mais même pour ça il faut javascript:
- pour capter l'événement de sélection de la liste
- provoquer le submit du formulaire dont dépend la liste pour lancer le rechargement de la page

A mon avis, cette solution n'est pas aussi ergonomique que de faire comme dans le tuto...
maintenant, si tu ne veux pas d'ajax, tu peux enregistrer par php des tableaux javascripts qui encapsule les données liées de ta deuxième liste déroulante...
du coup, à partir du choix sur la première liste, tu détruis le contenu de la deuxième et tu le reconstruis à partir des tableaux en questions... tu peux éviter aussi de passer par jquery pour faire ça, mais tu as quand même besoin de javascript....

[Invité]

Bonjour,

1/

(j'ai déjà fait la verification des formulaires avec que du PHP)

Ceci n'est pas un argument "contre" l'utilisation d'Ajax.

En effet, ton formulaire sera de toute façon traité en PHP une fois soumis !

2/

Que du php/html même 5 pour un comportement dynamique côté client...

C'est pourtant tout-à-fait possible !...
mais aussi absurde, car ça suppose d'utiliser 2 formulaires :
Le 1er avec la liste des choix1
-> sélection
-> envoi (même page, avec rechargement)
-> récupération par $_POST du choix1
-> affichage du 2ème formulaire (avec requête appropriée pour la liste2 selon le choix1).

Mais là,... je vous parle d'un temps que les moins de 20 ans ne peuvent pas connaitre...

3/ Voici une discussion à lire : Listes liées Ajax : XMLHttpRequest ou Jquery ?

[kalimukti]

Mais là,... je vous parle d'un temps que les moins de 20 ans ne peuvent pas connaitre...

Ok, j'ai plus de 20 ans (!!!) et je connais... mais je le croise aussi encore... et même ça m'arrive d'y avoir recours... dans les sites où il est important de prendre en compte les nav sans javascript... donc c'est encore d'actualité... des fois...

[za3zou3TN]

D'accord, merci les amis,

s'il n' y a pas de solution avec le PHP pour vérifier les champs des listes déroulantes entre eux, j'utiliserai les moyens possible JS/JQuery .....

merci pour vos solutions proposées

[Invité]

Qu'est-ce que tu entends par "vérifier les champs des listes déroulantes entre eux" ?

[kalimukti]

Les lier entre eux, j'imagine ?

[Invité]

Bon.
J'ai écrit un petit bout de code pour des "listes liées SANS Ajax" :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<select id="idliste1" name="liste1" onchange="addOptions(this.selectedIndex, 'idliste2');">
	<option value="0">-- Choisissez un liste1 ---</option>
	<option value="1">blabla1</option>
	<option value="2">blabla2</option>
	<option value="3">blabla3</option>
</select>
 
<select id="idliste2" name="liste2">
	<option value="0">-- Choisissez un liste2 ---</option>
</select>

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
function addOptions(isel, id2)
{
	// isel : valeur de l option sélectionnée de la liste 1 
 
	// 1/ CREATION des options
	// Syntaxe : new Option("Text","Value", "defaultSelected true / false", "selected true / false");
	switch (isel) 
	{  
		// on peut construire ces array avec PHP
		case 1 : 
			var opt = [
				new Option('-- Choisissez un liste2 ---', '0', false, false),
				new Option('machin11', '11', false, false),
				new Option('machin12', '12', false, false),
				new Option('machin13', '13', false, false)
			];
			break; 
		case 2 : 
			var opt = [
				new Option('-- Choisissez un liste2 ---', '0', false, false),
				new Option('machin21', '21', false, false),
				new Option('machin22', '22', false, false),
				new Option('machin23', '23', false, false),
				new Option('machin24', '24', false, false),
				new Option('machin25', '25', false, false),
				new Option('machin26', '26', false, false)
			];
			break; 
		case 3 : 
			var opt = [
				new Option('-- Choisissez un liste2 ---', '0', false, false),
				new Option('machin31', '31', false, false),
				new Option('machin32', '32', false, false),
				new Option('machin33', '33', false, false),
				new Option('machin34', '34', false, false)
			];
			break; 
		// ... (et ainsi de suite...)
		default : 
			var opt = [
				new Option('-- Choisissez un liste2 ---', '0', false, false)
			];
	}
	// 2/ AJOUT des options
	var List2 = document.getElementById(id2); //id2 : id de la liste à laquelle ajouter les options
	var i, n;
	n = opt.length;
		List2.innerHTML = ''; // on vide les options
	for (i=0; i<n; i++)
	{
		List2.options.add(opt[i]); // on ajoute les options
	}
}