Affichage d'une liste deroulante dependant d'une autre

Version imprimable

22/10/2015, 13h36
za3zou3TN

1 pièce(s) jointe(s)

Affichage d'une liste deroulante dependant d'une autre

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

Pièce jointe 190780
22/10/2015, 13h53
rawsrc

Bonjour

un petit tuto sur les listes liées par ici
22/10/2015, 15h27
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)
23/10/2015, 10h06
kalimukti

Citation:

Envoyé par za3zou3TN

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....
23/10/2015, 10h21
Invité

Bonjour,

1/

Citation:

Envoyé par za3zou3TN

(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/

Citation:

Envoyé par kalimukti

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 ?
23/10/2015, 10h36
kalimukti

Citation:

Envoyé par jreaux62

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... :)
23/10/2015, 10h52
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
23/10/2015, 11h07
Invité

Qu'est-ce que tu entends par "vérifier les champs des listes déroulantes entre eux" ? :koi:
23/10/2015, 11h11
kalimukti

Les lier entre eux, j'imagine ?

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

Code:

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:

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
	}
}