Discussion :

[Daviloppeur]

Bonjour,

Voici mon problème, je désire faire un formulaire avec 3 liste déroulantes dynamiques.
Le choix de la première liste affectant la seconde, le choix de la seconde affectant la troisième.

Pour chaque liste, le remplissage s'effectue à chaque fois par une requête mysql avec des paramètres différents suivant la valeur trouvé à la liste précédente.

Voici le code que j'ai produit partie html :

Code :

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
 
<?php //Déclaration de variables utiles (valeurs des fieldid)
$fieldid_departement = 59;
$fieldid_type = 67;
$fieldid_type_sport = 70;
$fieldid_type_sorties = 71;
$fieldid_type_loisirs = 72;
$fieldid_activite_sportcombat = 73;
$fieldid_activite_sportnautique = 75;
$fieldid_activite_sportequestre = 74;
?>
 
 
<!--  GESTION DU TYPE -->
<div id='type'>
<select id='type_liste' name='type_liste' style='width:160px;' onChange='change_type();'>
<?php
        $resultat_type = mysql_query('SELECT fieldtitle FROM jos_comprofiler_field_values WHERE fieldid ='.$fieldid_type);
        while($row = mysql_fetch_array($resultat_type))
        {
                echo '<option >'.$row["fieldtitle"].'</option>';
        }
?>	
</select>
</div>
 
<div id='Sports' class='select' style='display:block;'>
<select id='typeliste' name='typeliste' style='width:160px;' onChange='change_categorie()'>
<?php
        $resultat_typelistsport = mysql_query('SELECT fieldtitle FROM jos_comprofiler_field_values WHERE fieldid ='.$fieldid_type_sport);
        while($row = mysql_fetch_array($resultat_typelistsport))
        {
                echo '<option >'.$row["fieldtitle"].'</option>';
        }
?>
</select>
</div>
 
<div id='Sorties' class='select' style='display:none;'>
<select id='typeliste' name='typeliste' style='width:160px;' onChange='change_categorie()'>
<?php
        $resultat_typelistsorties = mysql_query('SELECT fieldtitle FROM jos_comprofiler_field_values WHERE fieldid ='.$fieldid_type_sorties);
        while($row = mysql_fetch_array($resultat_typelistsorties))
        {
                echo '<option >'.$row["fieldtitle"].'</option>';
        }
?>
</select>
</div>
 
<div id='Loisirs' class='select' style='display:none;'>
<select id='typeliste' name='typeliste' style='width:160px;' onChange='change_categorie()'>
<?php
        $resultat_typelistloisirs = mysql_query('SELECT fieldtitle FROM jos_comprofiler_field_values WHERE fieldid ='.$fieldid_type_loisirs);
        while($row = mysql_fetch_array($resultat_typelistloisirs))
        {
                echo '<option >'.$row["fieldtitle"].'</option>';
        }
?>
</select>
</div>
<!--  FIN GESTION DU TYPE -->
 
 
 
 
 
<!-- GESTION DE LA CATEGORIE -->
<div id='Sport de combat' class='selectcategorie' style='display:block;'>
<select id='typelisteactivite' name='typelisteactivite' style='width:160px;'>
<?php
        $resultat_categorie_combat = mysql_query('SELECT fieldtitle FROM jos_comprofiler_field_values WHERE fieldid ='.$fieldid_activite_sportcombat);
        while($row = mysql_fetch_array($resultat_categorie_combat))
        {
                echo '<option >'.$row["fieldtitle"].'</option>';
        }
?>
</select>
</div>
 
<div id='Sport équestre' class='selectcategorie' style='display:none;'>
<select id='typelisteactivite' name='typelisteactivite' style='width:160px;'>
<?php
        $resultat_categorie_equestre = mysql_query('SELECT fieldtitle FROM jos_comprofiler_field_values WHERE fieldid ='.$fieldid_activite_sportequestre);
        while($row = mysql_fetch_array($resultat_categorie_equestre))
        {
                echo '<option >'.$row["fieldtitle"].'</option>';
        }
?>
</select>
</div>
<!--  FIN GESTION CATEGORIE -->

et mon javascript :

Code :

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
 
function change_type()
{
	var type = $('type_liste');
	var selects = $$('div.select');
	for ( var i = 0; i < selects.length; i++ ) {
		if (selects[i].id == type.value ) {
			selects[i].style.display = 'block';
		} else {
			selects[i].style.display = 'none';
		}
	}
}
 
function change_categorie()
{
	var type = $('typeliste');
	var selects = $$('div.selectcategorie');
	for ( var i = 0; i < selectcategorie.length; i++) {
		if (selects[i].id == type.value ) {
			selects[i].style.display = 'block';
		} else {
			selects[i].style.display = 'none';
		}
	}
}

Je peux envoyé ma bdd par MP si besoin. Pour le moment la première liste s'affiche comme il faut, la seconde aussi mais impossible d'afficher correctement la troisième.

Je pense que ma fonction change_categorie n'est pas bonne, notemment la déclaration de typeliste.

merci de votre aide

ps:j'ai cherché sur le forum mais je n'ai trouvé la réponse que pour 2 listes dynamiques, jamais 3 et pas en sql

[andry.aime]

Bonjour et Bienvenue sur Developpez.

j'ai cherché sur le forum mais je n'ai trouvé la réponse que pour 2 listes dynamiques, jamais 3 et pas en sql

Listes déroulantes liées entre elles
Le principe pour 3 listes est le même que pour 2 listes, dans le onchange de la seconde liste, tu faits une requête AJAX pour modifier la 3ème.
Tu as l'id "typeliste" 2 fois, un id doit être unique dans un document.

[Daviloppeur]

Bonjour et merci pour ta réponse.

D'après le lien que tu m'as indiqué, je ne pense pas que je puisse utiliser la solution en php/mysql, j'ai trop d'options pour mes listes.

Pour ajax, je pense que je dois fouiller de ce côté mais mon problème est que tous les requêtes pour remplir les 3 listes se font sur la même table (jos_comprofiler_field_values), je n'ai pas d'id unique et plusieurs tables comme dans l'exemple permettant de retrouver les données adéquates.

Je vais corriger l'id typeliste qui est présent 2 (même 3 fois) pourtant l'affichage de la seconde liste ne me renvoie pas d'erreur.

[Daviloppeur]

Sauf erreur de ma part le script avec ajax et les listes (IV-IV-A) ne marche pas.
( http://www.developpez.net/forums/d59...s-liees-entre/ )

Chez moi, la section livre affiche toujours "choisir un auteur" sans permettre de selection.

Erreur dans le code ou erreur de ma part ?

[andry.aime]

Fait voir le bout de code javascript et Html concernés

[Daviloppeur]

C'est le même qu'a : http://www.developpez.net/forums/d59...s-liees-entre/

J'ai fais un copier coller du code, de la partie IV.IV.a intitulé Listes liées (auteurs.php, ajaxlivre.php et code sql pour créer la base.)

[andry.aime]

Ce code marche nickel, tu as fait une erreur quelque part.

[Daviloppeur]

Autant pour moi, je viens de refaire un test, effectivement ça marche.
Je me demande si je n'avais pas nommé ajaxlivre.php au lieu de ajaxLivre.php.

Pour en revenir à mon problème, j'essai d'adapter ce code à mon problème. Je vais encore m'acharné et je posterais plus tard mon évolution si jamais je n'y arrive pas.

[Daviloppeur]

J'arrive à faire marcher le code pour mon cas avec les 2 premières listes, par contre je n'arrive pas à capter l'évènement de modification de la seconde liste.

Voici mon code : fichier principal dropdown.php

Code :

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
 
<html>
	<head>		
		<script type='text/javascript'>
 
			function getXhr(){
                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                                return xhr;
			}
 
			/* Méthode qui sera appelée sur le click du bouton	*/
			function affichage_categorie(){
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('livre').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","categorieDropdown.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de l'auteur
				//Retourne un objet HTML à partir de son id, défini dans la propriété id de la balise de l'objet.
				sel = document.getElementById('auteur');
				idauteur = sel.options[sel.selectedIndex].value;
				xhr.send("idAuteur="+idauteur);
			}
 
			function affichage_activite(){
				alert('APPEL DE AFFICHAGE ACTIVITE');
				var xhr_activite = getXhr();
				xhr_activite.onreadystatechange = function(){
					if(xhr_activite.readyState == 4 && xhr_activite.status == 200){
						leselect = xhr_activite.responseText;						
						document.getElementById('activite').innerHTML = leselect;
					}
				}
				xhr_activite.open("POST","activiteDropdown.php",true); //?? meme fichier php ?
				xhr_activite.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				sel = document.getElementById('livre');
				idauteur = sel.options[sel.selectedIndex].value;
				xhr_activite.send("idActivite="+idauteur);			
			}		
		</script>
	</head>
	<body>
		<form>
			<fieldset style="width: 500px">				
				<label>Auteurs</label>
				<select name='auteur' id='auteur' onchange='affichage_categorie()'>
					<option value='-1'>Choisir un type</option>
					<?
												//$res = mysql_query("SELECT * FROM auteur ORDER BY nom");
						$res = mysql_query("SELECT * FROM jos_comprofiler_field_values WHERE fieldid=67 ORDER BY fieldtitle");
						while($row = mysql_fetch_assoc($res)){
							//echo "<option value='".$row["id"]."'>".$row["nom"]."</option>";
							echo "<option value='".$row["fieldvalueid"]."'>".$row["fieldtitle"]."</option>";
						}
					?>
				</select>						
 
				<label>Livres</label>
				<div id='livre' style='display:inline'>
				<select name='livre' id='livre' onchange='affichage_activite()'>
					<option value='-1'>Choisir une categorie</option>
				</select>
				</div>				
 
				<label>Activite</label>
				<div id='activite' style='display:inline'>
				<select name='activite'>
					<option value='-1'>Choisir une activite</option>
				</select>
				</div>				
			</fieldset>
		</form>
	</body>
</html>

fichier categorieDropdown.php

Code :

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
 
<?php
        $categorie_sport_id     = 70;
        $categorie_loisirs_id   = 72;
        $categorie_detente_id   = 71; 
                        
        echo "<select name='livre'>";
        if(isset($_POST["idAuteur"])){  
        
        switch($_POST['idAuteur']){
        case 63:
                $res = mysql_query("SELECT * FROM jos_comprofiler_field_values WHERE fieldid=".$categorie_sport_id." ORDER BY fieldid");        
        break;
        
        case 64:
                $res = mysql_query("SELECT * FROM jos_comprofiler_field_values WHERE fieldid=".$categorie_detente_id." ORDER BY fieldid");      
        break;
        
        case 65:
                $res = mysql_query("SELECT * FROM jos_comprofiler_field_values WHERE fieldid=".$categorie_loisirs_id." ORDER BY fieldid");      
        break;
        
        default:
                $res = mysql_query("SELECT * FROM jos_comprofiler_field_values WHERE fieldid=".$categorie_sport_id." ORDER BY fieldid");        
        }                               
                //$res = mysql_query("SELECT id,titre FROM livre WHERE idAuteur=".$_POST["idAuteur"]." ORDER BY titre");
                while($row = mysql_fetch_assoc($res)){
                        //echo "<option value='".$row["id"]."'>".$row["titre"]."</option>";
                        echo "<option value='".$row["fieldvalueid"]."'>".$row["fieldtitle"]."</option>";
                }
        }
        echo "</select>";
//foreach($_POST as $key => $val) echo '$_POST["'.$key.'"]='.$val.'<br/>';
?>

fichier activiteDropdown.php

Code :

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
 
<?php   
// On récupère la valeur fieldvalueid - a nous de faire les requêtes sql correspondantes
        
        echo "<select name='activite'>";
        if(isset($_POST["idAuteur"])){  
        
        /*switch($_POST['idAuteur']){
        case 63:
                $res = mysql_query("SELECT * FROM jos_comprofiler_field_values WHERE fieldid=".$categorie_sport_id." ORDER BY fieldid");        
        break;
        
        case 64:
                $res = mysql_query("SELECT * FROM jos_comprofiler_field_values WHERE fieldid=".$categorie_detente_id." ORDER BY fieldid");      
        break;
        
        case 65:
                $res = mysql_query("SELECT * FROM jos_comprofiler_field_values WHERE fieldid=".$categorie_loisirs_id." ORDER BY fieldid");      
        break;
        
        default:
                $res = mysql_query("SELECT * FROM jos_comprofiler_field_values WHERE fieldid=".$categorie_sport_id." ORDER BY fieldid");        
        }*/                             
                $res = mysql_query("SELECT * FROM jos_comprofiler_field_values WHERE fieldid=73 ORDER BY fieldid");
                while($row = mysql_fetch_assoc($res)){
                        //echo "<option value='".$row["id"]."'>".$row["titre"]."</option>";
                        echo "<option value='".$row["fieldvalueid"]."'>".$row["fieldtitle"]."</option>";
                }
        }
        echo "</select>";
foreach($_POST as $key => $val) echo '$_POST["'.$key.'"]='.$val.'<br/>';
?>

L'appel de onchange avec affichage_activite sur la seconde liste n'est pas pris en compte. Ou est mon erreur ? .... et en voyez vous d'autre

[Bovino]

Salut,

D'abord, tu as deux éléments (une div et un select) avec l'id livre, donc quand tu fais le innerHTML, c'est le premier qui est sélectionné (la div) et tu lui insères un select. Donc il n'y a pas de onchange sur ce select.
En fait, il faut que tu fasses comme actuellement mais en précisant un id unique pour ton select et après le innerHTML, tu ajoutes un gestionnaire onchange sur le select.

[Daviloppeur]

Merci pour l'aide.
Visiblement, ce que je fais ne convient pas :

Code :

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<html>
	<head>		
		<script type='text/javascript'>
	 
			function getXhr(){
                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                return xhr;
			}
			
			/* Méthode qui sera appelée sur le click du bouton	*/
			function affichage_categorie(){
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('livre').innerHTML = leselect;
					}
				}

				// Ici on va voir comment faire du post
				xhr.open("POST","categorieDropdown.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de l'auteur
				//Retourne un objet HTML à partir de son id, défini dans la propriété id de la balise de l'objet.
				sel = document.getElementById('auteur');
				idauteur = sel.options[sel.selectedIndex].value;
				xhr.send("idAuteur="+idauteur);
			}
		
			function affichage_activite(){
				alert('APPEL DE AFFICHAGE ACTIVITE');
				var xhr_activite = getXhr();
				xhr_activite.onreadystatechange = function(){
					if(xhr_activite.readyState == 4 && xhr_activite.status == 200){
						leselect = xhr_activite.responseText;						
						document.getElementById('livre2').innerHTML = leselect;
					}
				}
				xhr_activite.open("POST","activiteDropdown.php",true); //?? meme fichier php ?
				xhr_activite.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				sel = document.getElementById('auteur');
				idauteur = sel.options[sel.selectedIndex].value;
				xhr_activite.send("idAuteur="+idauteur);			
			}		
		</script>
	</head>
	<body>
		<form>
			<fieldset style="width: 500px">				
				<label>Auteurs</label>
				<select name='auteur' id='auteur' onchange='affichage_categorie()'>
					<option value='-1'>Choisir un type</option>
					<?
												//$res = mysql_query("SELECT * FROM auteur ORDER BY nom");
						$res = mysql_query("SELECT * FROM jos_comprofiler_field_values WHERE fieldid=67 ORDER BY fieldtitle");
						while($row = mysql_fetch_assoc($res)){
							//echo "<option value='".$row["id"]."'>".$row["nom"]."</option>";
							echo "<option value='".$row["fieldvalueid"]."'>".$row["fieldtitle"]."</option>";
						}
					?>
				</select>						
				
				<label>Livres</label>
				<div id='livre' style='display:inline'>
				<select name='livre' id='livre2' onchange='affichage_activite()'>
					<option value='-1'>Choisir une categorie</option>
				</select>
				</div>				
				
				<label>Activite</label>
				<div id='activite' style='display:inline'>
				<select name='activite'>
					<option value='-1'>Choisir une activite</option>
				</select>
				</div>				
			</fieldset>
		</form>
	</body>
</html>

en gras mes modifications
En effet, la fonction affichage_activite n'est toujours pas appeler, l'instruction alert s'y trouvant ne s'exécutant pas.

[andry.aime]

Re,
tu as mis

Code PHP :

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

echo '<select name="livre" id="livre2" onchange="affichage_activite()">';

dans le php?
C'est à dire le onchange dans le select.

[Daviloppeur]

Re,

Excuse moi, mais je ne comprends pas ce que tu veux me dire.

Le onchange est effectivement sur le select avec un id=livre2 et non plus livre.

[E.Bzz]

Bonjour,

Le onchange est effectivement sur le select avec un id=livre2 et non plus livre.

Oui, mais dans ton HTML.

Il faut aussi (et surtout !) générer ce onchange dans categorieDropdown.php (et/ou activiteDropdown.php)

A+

[Bovino]

Le onchange est effectivement sur le select avec un id=livre2 et non plus livre.

Oui mais tu fais :

Code :

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

document.getElementById('livre').innerHTML = leselect;

Donc le contenu (ton select 'livre2') disparait et son onchange avec lui

[Daviloppeur]

Merci beaucoup à tous.
J'y suis finalement arrivé, je donne mon code en espérant que cela puisse aidé d'autres.

dropdown.php

Code :

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
 
<html>
	<head>		
		<script type='text/javascript'>
 
			function getXhr(){
                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else {  
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest, mettez a jour votre navigateur"); 
				   xhr = false; 
				} 
                return xhr;
			}
 
			function affichage_categorie(){
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('categorie').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","categorieDropdown.php",true);
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments, ici, l'id de l'auteur
				//Retourne un objet HTML à partir de son id, défini dans la propriété id de la balise de l'objet.
				sel = document.getElementById('auteur');
				idcategorie = sel.options[sel.selectedIndex].value;
				xhr.send("idCategorie="+idcategorie);
			}
 
			function affichage_activite(){				
				var xhr_activite = getXhr();
				xhr_activite.onreadystatechange = function(){
					if(xhr_activite.readyState == 4 && xhr_activite.status == 200){
						leselect = xhr_activite.responseText;						
						document.getElementById('activite').innerHTML = leselect;
					}
				}
				xhr_activite.open("POST","activiteDropdown.php",true); 
				xhr_activite.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				sel = document.getElementById('categorie2');
				idactivite = sel.options[sel.selectedIndex].value;
				xhr_activite.send("idActivite="+idactivite);			
			}		
		</script>
	</head>
	<body>
		<form>
			<fieldset style="width: 500px">				
				<label>Type :</label>
				<select name='auteur' id='auteur' onchange='affichage_categorie()'>
					<option value='-1'>Choisir un type</option>
					<?
												$res = mysql_query("SELECT * FROM jos_comprofiler_field_values WHERE fieldid=67 ORDER BY fieldtitle");
						while($row = mysql_fetch_assoc($res)){							//
							echo "<option value='".$row["fieldvalueid"]."'>".$row["fieldtitle"]."</option>";
						}
					?>
				</select>						
 
				<label>Categorie</label>
				<div id='categorie' style='display:inline'>
<!-- 			<select name='livre' id='livre2'> <option value='-1'>Choisir une categorie</option>	</select> -->
				</div>	
 
				<label>Activite</label>
				<div id='activite' style='display:inline'>
<!-- 			<select name='activite'> <option value='-1'>Choisir une activite</option> </select> -->
				</div>				
			</fieldset>
		</form>
	</body>
</html>

categoriedropdown.php

Code :

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
 
<?php
// On récupère la valeur fieldvalueid - a nous de faire les requêtes sql correspondantes
        
        $categorie_sport_id     = 70;
        $categorie_loisirs_id   = 72;
        $categorie_detente_id   = 71; 
                        
        echo "<select name='categorie' id='categorie2' onchange='affichage_activite()'>";
        if(isset($_POST["idCategorie"])){       
        
        switch($_POST['idCategorie']){
        case 63:
                $res = mysql_query("SELECT * FROM jos_comprofiler_field_values WHERE fieldid=".$categorie_sport_id." ORDER BY fieldid");        
        break;
        
        case 64:
                $res = mysql_query("SELECT * FROM jos_comprofiler_field_values WHERE fieldid=".$categorie_detente_id." ORDER BY fieldid");      
        break;
        
        case 65:
                $res = mysql_query("SELECT * FROM jos_comprofiler_field_values WHERE fieldid=".$categorie_loisirs_id." ORDER BY fieldid");      
        break;
        
        default:
                $res = mysql_query("SELECT * FROM jos_comprofiler_field_values WHERE fieldid=".$categorie_sport_id." ORDER BY fieldid");        
        }                               
                while($row = mysql_fetch_assoc($res)){
                        echo "<option value='".$row["fieldvalueid"]."'>".$row["fieldtitle"]."</option>";
                }
        }
        echo "</select>";
?>

activiteDropdown.php

Code :

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
 
<?php
                
// On récupère la valeur fieldvalueid - a nous de faire les requêtes sql correspondantes
$activite_sport__combat_id = 73;
$activite_sport_nautique_id = 75;
$activite_sport_equestre_id = 74;               
                        
        echo "<select name='activite'>";
        if(isset($_POST["idActivite"])){        
        
        switch($_POST['idActivite']){
        case 71:
                $res = mysql_query("SELECT * FROM jos_comprofiler_field_values WHERE fieldid=".$activite_sport_combat_id." ORDER BY fieldid");  
        break;
        
        case 72:
                $res = mysql_query("SELECT * FROM jos_comprofiler_field_values WHERE fieldid=".$activite_sport_equestre_id." ORDER BY fieldid");        
        break;
        
        case 73:
                $res = mysql_query("SELECT * FROM jos_comprofiler_field_values WHERE fieldid=".$activite_sport_nautique_id." ORDER BY fieldid");        
        break;
        
        default:
                $res = mysql_query("SELECT * FROM jos_comprofiler_field_values WHERE fieldid=".$activite_sport_id." ORDER BY fieldid"); 
        }                       
                while($row = mysql_fetch_assoc($res)){          
                        echo "<option value='".$row["fieldvalueid"]."'>".$row["fieldtitle"]."</option>";
                }
        }
        echo "</select>";
foreach($_POST as $key => $val) echo '$_POST["'.$key.'"]='.$val.'<br/>';
?>

Une dernière question esthétique avant de mettre le flag résolu, existe t'il un moyen de faire apparaitre liste2 & liste3 vide même si rien n'est choisi dans liste1. Actuellement les listes se "crée" au fur et a mesure. Cela marche mais n'est pas très jolie.

merci

[kernelfailure]

Tu peux afficher des select avec 1 option vide. Mais je ne sais pas si cela sera plus esthétique à ton gout.

Peut-être qu'avec un attribut indiquant qu'il ne peut être modifié ce serait pas mal.

[Daviloppeur]

Trouvé par exemple pour la liste categorie rajouter dans dropdown.php sous
<div id='categorie' ....

Code :

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

<select name='categorie'> <option value='-1'>Choisir une categorie</option>	</select>

Encore une fois merci à tous pour l'aide apportée.