[Débutant] Affichage ou non de parties d'une page selon élément d'un select

Version imprimable

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:

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 à 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 à cocher">cases à cocher</option> <option value="zone de texte">zone de texte</option> <option value="champs de texte">champs de texte</option> <option value="liste déroulante">liste dé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. :D

16/03/2009, 17h03
SpaceFrog

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

Citation:

Envoyé par SpaceFrog

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:

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:

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>

16/03/2009, 17h28
SpaceFrog

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

text n'est pas crossbrowser ...

Code:

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

sinon pourquoi pas le value ?

Merci pour le innerHTML.

Reste que ça n'a pas changé.

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

Ca donnerait

Code:

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

?

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

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

17/03/2009, 08h30
SpaceFrog

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

Mmm oui, c'est à dire ?

J'ai essayé d'ajouter :
Code:

1 2 3 4 5 6 7 8 9 10 11 <style type="text/css" media="screen"> #reponses { display: none; } #question_suivante { display: none; } #rep_question_suivante { display: none; } </style>
... dans l'entête, mais apparemment ce n'est pas encore ça.

17/03/2009, 09h43
SpaceFrog

y'a juste deux ) en trop dans ton code ...

Ah mais oui !

Pour résumer :

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

... ça marche.

Merci SpaceFrog pour ton aide et tes réponses en jeu de piste ^^.

17/03/2009, 10h47
SpaceFrog

Je considère que te donner la solution toute faite ne te fera pas progresser.
TU as peut être perdu un peu de temsp cette fois ci, mais au moins tu as assimilé la solution ...
Du moins je l'espère :mouarf:
17/03/2009, 15h18
m1ckros

J'ai mis ça en résolu trop tôt. :mrgreen:

Petit soucis que je n'avais pas relevé : si l'utilisateur actualise sa page.
Le champs de la liste sélectionné ne change pas alors que les div apparaissent selon les paramètres initiaux.

Il n'y aurait pas un moyen pour que l'affichage des éléments de la liste se réinitialise avec l'actualisation (en sélectionnant le premier élément) ou, au contraire, que les div ne se réinitialisent pas à chaque rafraichissement ?
17/03/2009, 15h30
SpaceFrog

un petit script dasn le onload de la page
17/03/2009, 16h29
m1ckros
Merci, cette fois je pense que c'est bon :
Code:

1 2 3 4 window.onload = function() { document.getElementById('type').selectedIndex = 0; };
Après, je ne sais pas si c'est correctement écrit. J'ai mis ça tel quel dans l'entête de la page avec les autres fonctions.
17/03/2009, 16h31
SpaceFrog

c'est un façon de faire ...

tu aurais pu avoir ta fonction dans le head et l'appeler dans le onload de la balise body