Discussion :

[ouam81]

J'ai une page web sur laquelle se trouve plusieurs liste déroulantes dépendantes.
A l'aide d'XML HTTP Request, en choisissant une valeur dans une première liste, j'arrive à remplir la 2nde.

Je voudrais en cliquant sur la 2nde en remplir une 3ème.

J'ai 2 pbs :
* Sous IE6, le clic sur la 2nde liste (modèles) me renvoi la valeur "undefined"
* Sous Firefox, le clic sur la 2nde liste me rempli bien la 3eme liste, mais, si dans la 1ere liste on choisi une valeur (ça rempli la 2nde liste), puis on change la valeur, ça crée des listes imbriquées dans la 2eme liste (modèles).

Si vous avez des idées pour résoudre au moins le pb avec IE6, je vous en serais très reconnaissant car même ne m'aide pas, ni les tutos trouvés sur developpez.com ...
par avance !

Voici les fichiers :
Page PHP :
Exécute une requete suivant un paramètre, et me renvoi toute la liste déroulante (de <select> à </select>)

Page web affichant les différentes listes

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
 
<tr>
<td align="center">Marque :</td>
<td align="center">
<select name="marque" onchange="javascript:recup_modeles();" id="marque">
<option value="-1"></option>
<option value="9">Alfa Roméo</option>
<option value="4">Chrysler</option>
<option value="2">Citroën</option>
<option value="18">Fiat</option>
<option value="0">AUTRE</option>
</select>
</td>
<td align="center">Mod&egrave;le :</td>
<td align="center"><div id="modele" style='display:inline'>
</div>
</td>
</tr>
<tr>
<td align="center">Finition :</td>
<td align="center"><div id="finition" style='display:inline'>
</div>
</td>
</tr>

Code JS pour récupérer les valeurs

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
 
var xhr=null;
function getXhr()
{
	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...\r\nVeuillez utilise Internet Explorer 5 ou mieux ... Firefox ! Merci."); 
	   xhr = false; 
	} 
}
 
function recup_modeles()
{
	var marque = document.getElementById("marque");
	if (marque.value != -1)
	{
		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('modele').innerHTML = "";
				document.getElementById('modele').innerHTML = leselect;
			}
		}
		/* Préparation d'une requête asynchrone de type GET : */
		xhr.open("GET", "/xmlhttp.php?marque="+marque.value,true); 
		/* Effectue la requête : */
		xhr.send(null); 
 
	}
	else
	{
		alert("Veuillez choisir une marque dans la liste !");
	}
}
 
function recup_finitions()
{
	var modele = document.getElementById("modele");
	alert (modele.value);
	if (modele.value != -1)
	{
		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('finition').innerHTML="";
				document.getElementById('finition').innerHTML = leselect;
			}
		}
		/* Préparation d'une requête asynchrone de type GET : */
		xhr.open("GET", "/xmlhttp.php?modele="+modele.value,true); 
		/* Effectue la requête : */
		xhr.send(null); 
 
	}
	else
	{
		alert("Veuillez choisir une marque dans la liste !");
	}
}

[siddh]

salut,
alors je suppose que tu as mis aussi un onchange sur ta deuxième liste.
Ie ne doit pas l'interpréter.
Pour contrer ça il faudra affecter la méthode apres le innerHTML.

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
 
function recup_modeles()
{
	var marque = document.getElementById("marque");
	if (marque.options[marque.selectedIndex].value != -1)
	{
		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('modele').innerHTML = "";
				document.getElementById('modele').innerHTML = leselect;
                                var modele = document.getElementById("modele");
                                modele.onchange = recup_finitions;
			}
		}
		/* Préparation d'une requête asynchrone de type GET : */
		xhr.open("GET", "/xmlhttp.php?marque="+marque.value,true); 
		/* Effectue la requête : */
		xhr.send(null); 
 
	}
	else
	{
		alert("Veuillez choisir une marque dans la liste !");
	}
}

ensuite, il semblerait que tu as deux id "modele", ton div et ton 2eme select ce qui ne peut qu'apporter confusion et doit être à l'origine du bug sous firefox.
On le voit bien là :

Code :

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

1
2
3
document.getElementById('modele').innerHTML = leselect;
var modele = document.getElementById("modele");
modele.onchange = recup_finitions;

et pour finir, pour récupérer la valeur selectionnée d'un select, prefères :

Code :

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

marque.options[marque.selectedIndex].value

à

Code :

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

marque.value

[ouam81]

Merci pour ces réponse !

J'ai effectivment un onChange sur mon 2nd <select>, qui est créé par le script PHP (le onChange est bien pris en compte étant donné que je trouve l'erreur "undefined" ):

Code :

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

1
2
3
echo "<select name='modele' id='modele' onChange='javascript:recup_finitions()'>";
...
echo "</select>";

Pour el div et le select de même nom, j'ai fait plusieurs tests (noms différents, mêmes noms) et comme un site le proposait avec les mêmes noms ... ! mais effectivment c'est illogique

Je teste cela ce soir, et je tiens au courant ...

[ouam81]

siddh !!!

J'ai corrigé mon code avec ça :

Code :

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

marque.options[marque.selectedIndex].value

et en renommant différemment les div et les select...
bilan : ça marche niquel sous IE et Firefox !!

!!