Liste liées avec IE et innerhtml

**greg91** · 24/06/2011, 09h35

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 :

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
 
<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 caché des listes de questions -->
<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

**javatwister** · 24/06/2011, 13h45

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

**Eric2a** · 24/06/2011, 14h15

Salut,

Essaie ceci (Testé avec IE8).

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