Discussion :

[binouzzz19]

Bonjour,

J'ai une page html, qui contient un select et deux options.
J'ai un évènement OnChange qui me permet d'afficher une div (et de cacher l'autre) en fonction de l'option choisie dans le select. Ca marche niquel. Le problème se pose à l'actualisation de la page, le select garde l'option sélectionnée avant cette actualisation, mais les div se cachent ... (normal, par défaut sur la page j'ai une option "Choisir" et les div sont toutes cachées, on n'affiche la div que lorsque l'on choisit une option.

Comment puis-je faire pour qu'à l'actualisation de la page, si l'option 1 est sélectionnée, la div 1 s'affiche (et les autres div se cachent), si l'option n est sélectionnée, la div n s'affiche (et les autres div se cachent). J'avais pensé aux sessions et variables post mais je ne suis pas sur que ce soit la bonne méthode.

En gros, niveau code, j'ai :

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
 
<script language="javascript">
        function affiche_cache() 
	{
		i = document.getElementById("sel").selectedIndex;
		if(i==0) return;
		if(i==1)
		{
			document.getElementById("div_1").style.display = "";
			document.getElementById("div_2").style.display = "none";
		}
		else if(i==2)
		{
			document.getElementById("div_2").style.display = "";
			document.getElementById("div_1").style.display = "none";
		}
	}
</script>
 
 
<select id="sel" onChange="affiche_cache();">
	<option value="" selected>Choisir</option>
	<option value="projet1">1</option>
	<option value="projet2">2</option>
</select>
 
 
<div style="display:none" class="div_select" id="div_1">
...
</div>
<div style="display:none" class="div_select" id="div_2">
...
</div>

[Bovino]

Lance une première fois ta fonction sur le onload du body.

[binouzzz19]

Merci de la réponse.

J'ai adapté mon code avec ce que tu m'as dit !
Cela fonctionne parfaitement sur Firefox, Google Chrome, Safari, mais sur IE8, lorsque par exemple l'option 2 est cochée et que j'actualise la page, le select reprend automatiquement l'option 0 et donc m'affiche ma div_0 alors que j'étais sur ma div_2 ...

Je ne pense pas que cela viennent du body onload mais plutôt du select en lui-même qui fais "selected" sur la première option ...

je précise que j'ai enlevé mon selected et que j'ai toujours le même problème ...

Extrait du 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
 
<script language="javascript">
        function affiche_cache() 
	{
		i = document.getElementById("sel").selectedIndex;
		if(i==0)
		{
			document.getElementById("div_0").style.display = "";
			document.getElementById("div_1").style.display = "none";
			document.getElementById("div_2").style.display = "none";
		}
		if(i==1)
		{
			document.getElementById("div_0").style.display = "none";
			document.getElementById("div_1").style.display = "";
			document.getElementById("div_2").style.display = "none";
		}
		else if(i==2)
		{
			document.getElementById("div_0").style.display = "none";
			document.getElementById("div_1").style.display = "none";
			document.getElementById("div_2").style.display = "";
		}
	}
</script>
 
 
<select id="sel" onChange="affiche_cache();">
	<option value="">Choisir</option> <!-- j'ai enlevé le selected -->
	<option value="projet1">1</option>
	<option value="projet2">2</option>
</select>
 
 
<div style="display:none" class="div_select" id="div_0">
...
</div>
<div style="display:none" class="div_select" id="div_1">
...
</div>
<div style="display:none" class="div_select" id="div_2">
...
</div>

Merci de votre aide

[binouzzz19]

Bon alors, après quelques tests et recherches, je me suis rendu compte, que à la différence de Firefox, lors d'un rafraichissement de la page, IE8 sélectionne par défaut la première option du select (ou le selected s'il est défini dans la balie option).

De ce fait, si j'ai l'option 1 selected par defaut, la div_1 s'affichera, puis si je sélectionne l'option 2, ma div_2 s'affichera et la div_1 se cachera. Puis si je rafraichi la page (j'ai l'option 2 sélectionnée avant le refresh), l'option 1 est sélectionnée comme par magie et donc ma div_1 s'affiche (au lieu de ma div_2).

Donc à priori, il s'agit d'un bug IE (encore une fois), en savez-vous plus sur le sujet ?

Merci d'avance.
Cordialement.

[binouzzz19]

Bon après plusieurs recherches infructueuses, j'ai décidé d'abandonner mon code javascript et j'ai opté pour un formulaire à soumission (méthode GET).

De ce fait, je peux gérer les selected, les div qui se cachent et les autres qui s'affichent.

Dommage qu'il n'y ait pas de solutions pour le moment ...
Je le mets en résolu, mais si vous avez des infos sur le Bug IE (qui après quelques tests, est là depuis IE6 au minimum), n'hésitez pas çà poster !

Merci