Javascript et affichage des div

**swoog** · 09/03/2010, 18h01

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 :

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

**vermine** · 10/03/2010, 08h28

Bonjour,

Vous êtes certains de vos valeurs ?
Que vaut ID, par exemple ? Euh, d'ailleurs, je vous conseille vivement de changer le nom de cette variable. C'est un mot réservé.

Ensuite, je ne sais plus si les label des options sont bel et bien leur value.
Puis il est possible que vous fassiez une concacténation de chaines de caractères plutôt qu'une addition.

**SpaceFrog** · 10/03/2010, 08h39

oulà beaucoup de code pour pas grand chose .

une option n'a pas de label, mais un value
ensuite pourquoi faire un compteur de div et dissocier le target ??

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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
<script type='text/javascript'>
//***********************************************
//Fonction qui affiche la DIV sélectionnée
//param : option ==> option choisie de le SELECT
//***********************************************
function visibilite(option)
{
var i=1;
while(document.getElementById("divid" + i++))
{
document.getElementById("divid" + (i-1)).style.display = ((i-1)==option)?"block":"none";
}
}
</script>
</head>
 
<body>
<form>
<select name="liste" style="width: 500px" onChange="visibilite(this.value);">
<option value="1">Article 1</option>
<option value="2">Article 2</option>
<option value="3">Article 3</option>
</select>
</form>
 
 
<div style="text-align: justify; display: block;" id="divid1" class="partie">
bla bla... un
</div>
 
<div style="text-align: justify; display: none;" id="divid2" class="partie">
bla bla... deux 
</div>
<div style="text-align: justify; display: none;" id="divid3" class="partie">
bla bla... trois
</div>
 
 
</body>
 
</html>