[AJAX] Chaîner 4 listes déroulantes

2 pièce(s) jointe(s)

Bonjour, j'ai un petit code (php + ajax) qui me permet d'afficher 3 listes déroulantes l'une en fonction de l'autre et ainsi de suite. Je voudrais l'adapter à 4 listes mais je n'y arrive pas! Je ne pense pas que le problème vienne du code php je crois plutôt qu'il viens du javascript mais je n'arrive pas à trouver l'erreur (suis pas tellement calé en javascript). J'ai adapté le code tel que je le pensais et je ne m'en sors pas du tout!
Je joint les sources contenant le code pour les trois listes et celles des 4 listes que je veut adapter !
Merci d'avance pour votre aide !

Tes 2 fichiers zip ne donnent vraiment pas envie de t'aider.
Tu devrais poster les parties du code qui sont intéressantes et localiser plus ou moins le problème.
D'autant plus que si ton script fait appel à une base de donnée, on va pas se bricoler une base rien que pour le tester !

Voilà, je suis prêt à t'aider comme pas mal d'autres personnes si tu postes ton code.

Merci D-Rek pour ta réponse. Voila le code qui me pose problème:
la page index.php sur la quel est affichée les 4 listes :

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
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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
 
<script type="text/javascript">
var Ld1Id='';
var Ld2Id='';
var Ld3Id=''; //La ligne que j'ai rajouté pour adapter le code 
var id_liste='';
 
function ValideLd2(val) {
	Ld1Id=val; //id_dpartement
	id_liste='2';//Utilis dans la fonction ChargeLd() pour identifier la liste droulante
	var LD_URL = 'ValideLd2.php?Ld1='+Ld1Id;
	ObjetXHR(LD_URL)
	// Rinitialisation de Ld3 si modification de LD1 aprs passage en Ld2
	if (Ld2Id!='') {ValideLd3('');	}
}
 
function ValideLd3(val) {
	Ld2Id=val; //id_commune
	id_liste='3'; //Utilis dans la fonction ChargeLd() pour identifier la liste droulante
	var LD_URL = 'ValideLd3.php?Ld1='+Ld1Id+'&Ld2='+Ld2Id;
//	if (Ld2Id=='') {var LD_URL = 'ValideLd3.php';}	
	ObjetXHR(LD_URL)
	if (Ld3Id!='') {ValideLd4('');}
}
 
// La fonction ajoutée pour activer la quatrième liste déroulante
// C'est cette fonction qui n'arrive pas à fonctionner lorsque l'on y fait appel
// en cliquant sur la troisième liste déroulante
function ValideLd4(val) {
	Ld3Id=val;
	id_liste='4';
	var LD_URL ='ValideLd4.php?Ld1='+Ld1Id+'&Ld2='+Ld2Id+'&Ld3='+Ld3Id;
	//if (Ld3Id=='') {var LD_URL='ValideLd4.php';}
	ObjectXHR (LD_URL)
}
 
function ObjetXHR(LD_URL) {
	//creation de l'objet XMLHttpRequest
	if (window.XMLHttpRequest) { // Mozilla,...
		xmlhttp=new XMLHttpRequest();
		if (xmlhttp.overrideMimeType) {
			xmlhttp.overrideMimeType('text/xml');
		}	
		xmlhttp.onreadystatechange=ChargeLd;
		xmlhttp.open("GET", LD_URL, true);
		xmlhttp.send(null);
	} else if (window.ActiveXObject) { //IE 
		xmlhttp=new ActiveXObject('Microsoft.XMLHTTP'); 
		if (xmlhttp) {
			xmlhttp.onreadystatechange=ChargeLd;
			xmlhttp.open('GET', LD_URL, false);
			xmlhttp.send();
		}
	}
	// Bouton non apparent car modification de LD1 ou Ld2
	document.getElementById('buttons').style.display='none';
}
 
// fonction pour manipuler l'appel asynchrone
function ChargeLd() {
	if (xmlhttp.readyState==4) { 
		if (xmlhttp.status==200) { 
			//span id="niv2" ou "niv3"
			document.getElementById('niv'+id_liste).innerHTML=xmlhttp.responseText; 
			if (xmlhttp.responseText.indexOf('disabled')<=0) {
				//focus sur liste droulante 2 ou 3
				//document.getElementById('Liste'+id_liste).focus(); 
			}	
		}
	}
}
 
function Affiche_Btn() {
	document.getElementById('buttons').style.display='inline';
}
//Dbut Script invisible
function switchDisplay(id) {
	if(document.getElementById(id).style.display == "none") {
		document.getElementById(id).style.display = "inline";
	} else {
		document.getElementById(id).style.display = "none";
	}
}
// Fin Script invisible
</script>
 
<style>
#buttons {
	display: none;
}
</style>
</head>
 
<body>
<noscript>
<p>Cette page ncessite que JavaScript soit activ; dans votre navigateur
</noscript>
<div id="Les3LD">
  <p>Selectionnez votre choix dans les listes d&eacute;roulantes:
  <a href="#" onClick="switchDisplay('niv1')">BlindUp</a>
</p>
  <form method="get" action="index.php">
    <span id="niv1" >
	<? include 'ValideLd1.php'; ?></span>&nbsp; <!--Pour remplir la liste droulante 1-->
    <span id="niv2" onClick="switchDisplay('niv1')">
    <? include 'ValideLd2.php'; ?></span>&nbsp; <!--Pour remplir la liste droulante 2-->
    <span id="niv3" onClick="switchDisplay('niv2')">
    <? include 'ValideLd3.php'; ?></span>&nbsp; <!--Pour remplir la liste droulante 3-->
    <span id="niv4" onClick="switchDisplay('niv3')">
    <? include 'ValideLd4.php'; ?></span>&nbsp; <!--Pour remplir la liste droulante 3-->
    <span id="buttons">
    <input type="submit" value="Valider">
    </span>
  </form>
</div>
</body>
</html>

la page ValideLd3.php, celle qui est censée appeler la 4eme liste:

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
 
<?PHP
include 'Connexionbd.php';
$Ld1_retour =''; //id_département clé de la liste déroulante 1 
$Ld2_retour =''; //id_commune clé de la liste déroulante 2	
 
if (isset($_GET['Ld1'])) {$Ld1_retour = $_GET['Ld1'];}
if (isset($_GET['Ld2'])) {$Ld2_retour =  $_GET['Ld2'];}
 
if (($Ld1_retour!='')&&($Ld2_retour!='')) {
	$rq="Select id_category, name_category from video_category where id_years=".$Ld1_retour." order by id_category;";
	$rq_pos_id=0;
	$rq_pos_val=1;
	$result= mysql_query ($rq) or die ("Select impossible");
	$retour = '<select name="list_category" id="list_category" size="4" onchange="ValideLd4(this[this.selectedIndex].value);">';
	$retour .= '<option selected value="">Choix de la vidéo...</option>';
 
	if (mysql_num_rows($result) != 0) {
		while ($row = mysql_fetch_row($result)) {
			$retour .= '<option value="'. $row[$rq_pos_id] .'">'. $row[$rq_pos_val] .'</option>';
		}
		$retour .= '</select>';
	} else {
		$retour = '<select name="list_category" id="list_category" size="4" disabled><option>Aucune catégorie disponible!</option></select>';
	}
	mysql_free_result($result);
	mysql_close($connexion);
}else{
	$retour = '<select name="list_category" id="list_category" size="4" disabled><option>Aucune catégorie!</option></select>';
}	
echo $retour
?>

Et enfin ValideLd4 qui ne s'affiche pas du tout !

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
 
<?php
include 'Connexionbd.php';
$Ld1_retour =''; //id_département clé de la liste déroulante 1 
$Ld2_retour =''; //id_commune clé de la liste déroulante 2
$Ld3_retour=''; //id_commune clé de la liste déroulante 3	
 
if (isset($_GET['Ld1'])) {$Ld1_retour = $_GET['Ld1'];}
if (isset($_GET['Ld2'])) {$Ld2_retour =  $_GET['Ld2'];}
if (isset($_GET['Ld3'])) {$Ld3_retour = $_GET['Ld3'];}
 
if (($Ld1_retour!='')&&($Ld2_retour!='')&&($Ld3_retour!='')) {
 
	$rq="Select id_video, name_video, video_time FROM video_file where id_yearss=".$Ld1_retour." AND id_events=".$Ld2_retour." AND id_categorys=".$Ld3_retour."order by name_video;";
	//$rq="Select id_category, name_category from video_category where id_years=".$Ld1_retour." order by id_category;";
	$rq_pos_id=0;
	$rq_pos_val=1;
	$result= mysql_query ($rq) or die ("Select impossible");
	$retour = '<select name="list_video" id="list_video" size="4" onchange="Affiche_Btn();">';
	$retour .= '<option selected value="">Choix de la vidéo...</option>';
 
	if (mysql_num_rows($result) != 0) {
		while ($row = mysql_fetch_row($result)) {
			$retour .= '<option value="'. $row[$rq_pos_id] .'">'. $row[$rq_pos_val] .'</option>';
		}
		$retour .= '</select>';
	} else {
		$retour = '<select name="list_video" id="list_video" size="4" disabled><option>Aucune vidéo disponible!</option></select>';
	}
	mysql_free_result($result);
	mysql_close($connexion);
}else{
	$retour = '<select name="list_video" id="list_video" size="4" disabled><option>Aucune video!</option></select>';
}	
echo $retour
 
?>

mERCI d'avance pour votre aide !