Javascript et affichage des div
Bonjour la communauté,
j'ai un petit soucis : je veux afficher une DIV selon le choix fait dans un SELECT. Mon problème est que seule la DIV 1 (de label "divid1") s'affiche, les autres ne s'affichant pas.
Précision : quand je choisi une DIV, les autres doivent s'effacer (ce qui fonctionne).
Voici un bout de 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
52
53
54
55
56
57
58
59
60
61
62
| <form>
<select name="liste" style="width: 500px" onChange="visibilite(this);">
<option label="1">Article 1</option>
<option label="2">Article 2</option>
<option label="3">Article 3</option>
</select>
</form>
<div style="text-align: justify; display: none;" id="divid1" class="partie">
bla bla...
</div>
<br>
<div style="text-align: justify; display: none;" id="divid2" class="partie">
bla bla...
</div>
<br>
<div style="text-align: justify; display: none;" id="divid3" class="partie">
bla bla...
</div>
<br>
<script>
//*********************************************************
//Script qui compte le nombre de DIV de la CLASSE "partie"
//Nombre stocké dans nbDiv
//*********************************************************
var mesDiv = document.getElementsByTagName('div');
var nbDiv = 0;
for(var i=0; i < mesDiv.length; i++)
{
if(mesDiv[i].className == "partie")
{
nbDiv++;
}
}
//***********************************************
//Fonction qui affiche la DIV sélectionnée
//param : option ==> option choisie de le SELECT
//***********************************************
function visibilite(option)
{
var i;
var targetElement;
var ID;
ID = option.selectedIndex + 1;
//alert(nbDiv);
targetElement = document.getElementById("divid" + ID) ;
for( i = 1 ; i <= nbDiv ; i++)
{
document.getElementById("divid" + i).style.display = "none";
alert(i);
}
targetElement.style.display = "block" ;
alert('end');
}
</script> |
Merci d'avance ;)
