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

[m1ckros]

Mmm oui, c'est à dire ?

J'ai essayé d'ajouter :

Code :

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

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.

[SpaceFrog]

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

[m1ckros]

Ah mais oui !

Pour résumer :

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>

... ça marche.

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

[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

[m1ckros]

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

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 ?

[SpaceFrog]

un petit script dasn le onload de la page

[m1ckros]

Merci, cette fois je pense que c'est bon :

Code :

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

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.

[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