Discussion :

[m1ckros]

Bonjour à tous,
N'étant pas du tout expert en javascript, je cherche le moyen de changer mon affichage selon l'élément que je sélectionne dans un select.

J'ai essayé en faisant quelque chose comme ça :

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
<select onchange="
	if(this.options[this.selectedIndex].text == 'zone de texte' || this.options[this.selectedIndex].text == 'champs de texte')
	{
		document.getElementById('reponses').style.display = 'none';
		document.getElementById('question_suivante').style.display = 'block';
	}
	else
	{
		if(this.options[this.selectedIndex].text == 'cases &agrave; cocher')
		{
			document.getElementById('rep_question_suivante').style.display = 'none');
			document.getElementById('question_suivante').style.display = 'block';
		}
		else
		{
			document.getElementById('rep_question_suivante').style.display = 'block');
			document.getElementById('question_suivante').style.display = 'none';
		}
		document.getElementById('reponses').style.display = 'block';
	}
">
	<option value="boutons radio">boutons radio</option>
	<option value="cases &agrave; cocher">cases &agrave; cocher</option>
	<option value="zone de texte">zone de texte</option>
	<option value="champs de texte">champs de texte</option>
	<option value="liste d&eacute;roulante">liste d&eacute;roulante</option>
</select>
 
 
<div id="question_suivante">
...
</div>
 
<div id="reponses">
	<div id="rep_question_suivante">
	...
	</div>
</div>

Le soucis c'est que si j'ai un if-else simple, ça fonctionne. Mais dès que je concatène une autre condition à l'intérieur, ça ne réagit plus.
J'ai également tenté en bricolant avec un switch, mais pareil, ça ne fait rien.

J'imagine que ce n'est pas grand chose. Donc, si quelqu'un a une idée... Merci à celui qui aura le courage de la taper ici.

[SpaceFrog]

heu déja commence par externaliser la fonction dasn le head de la page et appelle la dans le onchange

[m1ckros]

heu déja commence par externaliser la fonction dasn le head de la page et appelle la dans le onchange

Dans ce cas,

L'entête :

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
<script type="text/javascript">
	<!--
	function SelectQuest(textSelected)
	{
		if(textSelected == 'zone de texte' || textSelected == 'champs de texte')
		{
			document.getElementById('reponses').style.display = 'none';
			document.getElementById('question_suivante').style.display = 'block';
		}
		else
		{
			if(textSelected == 'cases &agrave; cocher')
			{
				document.getElementById('rep_question_suivante').style.display = 'none');
				document.getElementById('question_suivante').style.display = 'block';
			}
			else
			{
				document.getElementById('rep_question_suivante').style.display = 'block');
				document.getElementById('question_suivante').style.display = 'none';
			}
			document.getElementById('reponses').style.display = 'block';
		}
	}
	//-->
</script>

Le corps :

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
// Liste déroulante
<select onchange="SelectQuest(this.options[this.selectedIndex].text);">
	<option value="boutons radio">boutons radio</option>
	<option value="cases &agrave; cocher">cases &agrave; cocher</option>
	<option value="zone de texte">zone de texte</option>
	<option value="champs de texte">champs de texte</option>
	<option value="liste d&eacute;roulante">liste d&eacute;roulante</option>
</select>
 
// Eléments à afficher ou pas
<div id="question_suivante">
...
</div>
 
<div id="reponses">
	<div id="rep_question_suivante">
	...
	</div>
</div>

[SpaceFrog]

Ha be voilà qui est déja beaucoup plus clair ...

text n'est pas crossbrowser ...

Code :

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

SelectQuest(this.options[this.selectedIndex].innerHTML)

sinon pourquoi pas le value ?

[m1ckros]

Merci pour le innerHTML.

Reste que ça n'a pas changé.

Sinon, le value... ben oui, pourquoi pas.

Ca donnerait

Code :

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

onchange="SelectQuest(this.options[this.selectedIndex].value);

?

Pour tester de votre côté, une version simplifiée de mon code :

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
<html>
<head>
<script type="text/javascript">
	<!--
	function SelectQuest(textSelected)
	{
		if(textSelected == 'zone de texte' || textSelected == 'champs de texte')
		{
			document.getElementById('reponses').style.display = 'none';
			document.getElementById('question_suivante').style.display = 'block';
		}
		else
		{
			if(textSelected == 'cases &agrave; cocher')
			{
				document.getElementById('rep_question_suivante').style.display = 'none');
				document.getElementById('question_suivante').style.display = 'block';
			}
			else
			{
				document.getElementById('rep_question_suivante').style.display = 'block');
				document.getElementById('question_suivante').style.display = 'none';
			}
			document.getElementById('reponses').style.display = 'block';
		}
	}
	//-->
</script>
</head>
<body>
 
<select onchange="SelectQuest(this.options[this.selectedIndex].value);">
	<option value="boutons radio">boutons radio</option>
	<option value="cases &agrave; cocher">cases &agrave; cocher</option>
	<option value="zone de texte">zone de texte</option>
	<option value="champs de texte">champs de texte</option>
	<option value="liste d&eacute;roulante">liste d&eacute;roulante</option>
</select>
 
<div id="question_suivante">
Contenu à afficher si 'cases &agrave; cocher' ou 'zone de texte' ou 'champs de texte' est sélectionné
</div>
 
<div id="reponses">
	Contenu à afficher si 'boutons radio' ou 'liste déroulante' ou 'cases &agrave; cocher' est sélectionné
	<div id="rep_question_suivante">
	Contenu à n'afficher que si 'boutons radio' ou 'liste déroulante' est sélectionné
	</div>
</div>
</body>
</html>

[SpaceFrog]

le style display n'est pas initialisé dasn le div