Liste liées avec IE et innerhtml

Version imprimable

Bonjour à tous,

Voilà plusieurs jours que je cherche une solution pour une liste lié qui fonctionne parfaitement sur tous les navigateurs sauf évidement sur IE .

J'ai bien vue que innerHTML posait problème avec IE, j'ai vue plein de solutions que j'ai j'ai testées, mais je n'arrive à rien de fonctionnel

- Une première liste permet de choisir une situation (situation_1 ou situation_2)
- Une deuxième liste permet de choisir une question en fonction de la situation (question_1 à question_4)
- Sous FF la liste de question apparait bien, sous IE il n'y a aucun affichage

Je suis très moyen (mauvais ?) en javascript, si quelqu'un pouvait m'aider :)
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 <script type="text/javascript"> /** * Affiche la liste de questions correspondant à la situation choisie */ function rafraichirListeQuestions(situation) { /* Remplace le contenu de la liste des questions par le contenu de la liste portant l'id correspondant à la situation donnée */ document.getElementById("question").innerHTML = document.getElementById(situation).innerHTML; } </script> <form action="valider.php" method="post" name="contact" > <select name="situation" id="situation" onchange="rafraichirListeQuestions(this.options[this.options.selectedIndex].value);"> <option value="">(Choisir une situation)</option> <option value="situation_1">Situation 1</option> <option value="situation_2">Situation 2</option> </select> <label for="question">Votre question</label> <select name="question" id="question" > </select> </form>  <div id="listes_questions" style="display:none"> <select name="situation_1" id="situation_1" > <option value="">(Choisir une question)</option> <option value="question_1">Question 1</option> <option value="question_2">Question 2</option> </select> <select name="situation_2" id="situation_2" > <option value="">(Choisir une question)</option> <option value="question_3">Question 3</option> <option value="question_4">Question 4</option> </select> </div>
J'ai compris que je devais regarder document.createElement ainsi que appendChild. Mais honnêtement, ça dépasse mon champ de compétences :(

24/06/2011, 13h45
javatwister

concrètement, tu n'insères aucune "<option>" dans ta deuxième liste!
le vois-tu?

Salut,

Essaie ceci (Testé avec IE8).

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Listes liées</title>
<script type="text/javascript">//<![CDATA[
	/**
	* Affiche la liste de questions correspondant à la situation choisie
	*/
	function rafraichirListeQuestions(){
		var quest=[],elt,opt,v,list=null,i;
 
		// Elements (valeurs / questions) correspondant à la première situation
		quest['situation_1']={
			val:['question_1','question_2'],
			txt:['Première question','Deuxième question']
		}
		// Elements (valeurs / questions) correspondant à la deuxième situation
		quest['situation_2']={
			val:['question_3','question_4'],
			txt:['Troisième question','Quatrième question']
		}
 
		// Liste déroulante
		elt=document.getElementById('question');
 
		// Supprime le contenu de la liste déroulante
		while(elt.hasChildNodes())elt.removeChild(elt.lastChild);
 
		// Créé et ajoute l'élément vide sélectionné par défaut de la liste déroulante
		opt=document.createElement('option');
		opt.setAttribute('value','');
		opt.appendChild(document.createTextNode('(Choisir une question)'));
		elt.appendChild(opt);
 
		// Obtenir la situation actuellement sélectionnée
		v=document.getElementById('situation').value;
		if(v){
			list=(typeof quest[v]!==undefined)?quest[v]:null;
		}
		if(!list)return false;
 
		// Créé et ajoute les éléments de la liste déroulante
		for(i=0;i<list.val.length;i++){
			opt=document.createElement('option');
			opt.setAttribute('value',list.val[i]);
			opt.appendChild(document.createTextNode(list.txt[i]));
			elt.appendChild(opt);
		}
	}
//]]>
</script>
</head>
<body>
<form action="valider.php" method="post" name="contact">
	<p>
		<select name="situation" id="situation" onchange="rafraichirListeQuestions();">
			<option value="" select="selected">(Choisir une situation)</option>
			<option value="situation_1">Situation 1</option>
			<option value="situation_2">Situation 2</option>
		</select>
		<label for="question">Votre question</label>
		<select name="question" id="question" >
			<option value="">(Choisir une question)</option>
		</select>
	</p>
</form>
</body>
</html>

24/06/2011, 15h29
greg91

Citation:

concrètement, tu n'insères aucune "<option>" dans ta deuxième liste!
le vois-tu?

Heu non, je ne voie pas mon erreur

Eric2a :

Citation:

Salut,
Essaie ceci (Testé avec IE8).
....

Énorme merci Eric2a cela fonctionne parfaitement sous IE7, IE8 et FF !
Tu m'enlève une grosse épine du pied.