Masquer des <div>

**Snap luvs pastèque** · 25/06/2009, 23h39

Bonjours!
Je travaille depuis peu sur un bout de code, lequel ne fait pas ce que je veut.

Voici le bout de 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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<script type="text/javascript">
 
	function showhide(divid){
		var div101 = document.getElementById("div101");
		var div102 = document.getElementById("div102");
		var div103 = document.getElementById("div103");
 
	if(divid== 'div101' ) {
		div101.style.display = 'block';
		div102.style.display = 'none';	
		div103.style.display = 'none';
	}
	else if(divid== 'div102' ) {
		div101.style.display = 'none';
		div102.style.display = 'none';
		div103.style.display = 'none';
	}
	else if(divid== 'div103' ) {
		div101.style.display = 'none';
		div102.style.display = 'none';
		div103.style.display = 'block';
	}
	else {
		div101.style.display = 'none';
		div102.style.display = 'none';
		div103.style.display = 'none';
	}
	}
</script>
 
<br>
 
Action 1:
<select name='action1' id="divid" onChange="showhide(this.value)">
	<option value='0'>Commun</option>
		<option value='div101' >---coup normal</option>
		<option value='div102' >---ne rien faire</option>
		<option value='div103' >---Technique personalisée</option>
</select>
 
 
 
 <div id='div101' style="display:none;">
	Votre niveau en maîtrise du sabre: <select name="maitrise_du_sabre1">
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
		<option value="4">4</option>
		<option value="5">5</option>
		<option value="6">6</option>
		<option value="7">7</option>
		<option value="8">8</option>
		<option value="9">9</option>
		<option value="10">10</option>
		<option value="11">11</option>
		<option value="12">12</option>
		<option value="13">13</option>
		<option value="14">14</option>
		<option value="15">15</option>
</div>
 
<div id='div103' style="display:none;">
		 Définissez votre technique:
		 nom:<input type="text" name="nom1">
		 dégats infligés:<input type="text" value="0" name="degats_perso1">
		 soins:<input type="text" value="0" name="soins_perso1">
		 protection: <input type="text" value="0" name="prot_perso1">
		 coût:<input type="text" value="0" name="cout_perso1">
	<br>(remplissez uniquement les valeurs selon l'effet de votre technique).
</div>

Le but, vous l'aurez compris, est de masquer/afficher des menus déroulants secondaires en fonction de l'option sélectionnée dans le premier menu.
PS: il est voulu que la 'div102' n'existe pas car lorsque cette valeur est choisie, rien n'est censé s'afficher.

Problème: je suppose que ce sera plus clair si je met des images.
Voilà ce que donne le code:

Quand rien n'est sélectionné, rien ne s'affiche. Normal, jusque-là.

lorsqu'on sélectionne l'option 'div101', la div101 s'affiche comme prévu mais la div103 s'affiche également, alors qu'elle devrait être masquée.
NB: si on sélectionne 'div102', rien ne s'affiche comme prévue. Cette variable ne conduis pas à un autre sous-menu déroulant.

Si on sélectionne la 'div103', rien ne s'affiche alors que la div103 devrait s'afficher.

J'avoue avoir beau relu et relu mon code, je n'y trouve pas d'erreur. Peut-être pourrez-vous m'éclairer?

**emmanuel.remy** · 26/06/2009, 00h15

Salut,

La balise select contenue dans div101 est refermée après la div103

Il n'existe pas de div102, donc quand le code essaie d'affecter un display:none ou block, cela plante

Le code modifié (en rouge):

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
71
72
73
74
75
76
77
78
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <body>
<script type="text/javascript">
 
	function showhide(divid){
	  	var div101 = document.getElementById("div101");
		var div102 = document.getElementById("div102");
		var div103 = document.getElementById("div103");
		
	if(divid== 'div101' ) {
		div101.style.display = 'block';
		div102.style.display = 'none';	
		div103.style.display = 'none';
	}
	else if(divid== 'div102' ) {
		div101.style.display = 'none';
		div102.style.display = 'none';
		div103.style.display = 'none';
	}
	else if(divid== 'div103' ) {
		div101.style.display = 'none';
		div102.style.display = 'none';
		div103.style.display = 'block';
	}
	else {
		div101.style.display = 'none';
		div102.style.display = 'none';
		div103.style.display = 'none';
	}
	}
</script>
 
<br>
 
Action 1:
<select name='action1' id="divid" onChange="showhide(this.value)">
	<option value='0'>Commun</option>
		<option value='div101' >---coup normal</option>
		<option value='div102' >---ne rien faire</option>
		<option value='div103' >---Technique personalisée</option>
</select>
 
 
 
 <div id='div101' style="display:none;">
	Votre niveau en maîtrise du sabre: <select name="maitrise_du_sabre1">
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
		<option value="4">4</option>
		<option value="5">5</option>
		<option value="6">6</option>
		<option value="7">7</option>
		<option value="8">8</option>
		<option value="9">9</option>
		<option value="10">10</option>
		<option value="11">11</option>
		<option value="12">12</option>
		<option value="13">13</option>
		<option value="14">14</option>
		<option value="15">15</option>
</select>
</div>
 
<div id='div103' style="display:none;">
		 Définissez votre technique:
		 nom:<input type="text" name="nom1">
		 dégats infligés:<input type="text" value="0" name="degats_perso1">
		 soins:<input type="text" value="0" name="soins_perso1">
		 protection: <input type="text" value="0" name="prot_perso1">
		 coût:<input type="text" value="0" name="cout_perso1">
	<br>(remplissez uniquement les valeurs selon l'effet de votre technique).
</div>

<div id='div102' style="display:none;"></div>
  </body>
</html>

ERE

**Snap luvs pastèque** · 26/06/2009, 00h27

Merci de la réponse rapide!

J'ai modifié le code, prenant le tien à la place, mais le même bug (la div103 affichée dans la div101) se produit...
J'en déduis qu'il doit y avoir autre chose...

Edit: Erreur de ma part, je n'avais pas copié un bout de code. Donc non seulement une réponse rapide mais JUSTE!

Merci =)

Masquer des <div>

JavaScript

Discussions similaires

Partager

Partager