Afficher / Masquer des DIV
Bonjour,
Je rencontre un petit souci, certainement de syntaxe.
J'ai une liste déroulante contenant 5 éléments.
Je souhaiterais que lorsqu'un élément est sélectionné dans cette liste, des cases à cocher correspondantes s'affichent. Puis que ces cases soient remplacées par d'autres en cas de changement de sélection dans la liste déroulante.
J'ai donc divisé chaque "lot" de cases à cocher dans des DIV distinctes, que je tente d'afficher lors de l'événement OnChange de la liste déroulante, en fonction de ce que l'utilisateur a sélectionné.
Mais ça ne fonctionne pas, j'obtiens une erreur JS "Objet attendu", et rien ne s'affiche lorsqu'un élément est sélectionné dans la liste déroulante.
Voici mon code :
- Dans HEAD (JavaScript) :
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
|
<script language="javascript">
// Fonction permettant l'affichage des cases à cocher en fonction de l'élément sélectionné dans la liste déroulante
// Chaque "lot" de cases à cocher est regroupé dans un div, identifié par un id
function changerub(rubrique){
var targetElement;
if(rubrique==0){
targetElement = document.formsuivi.getElementById('touschoix');
targetElement.style.display = "block" ;
}
elseif(rubrique==1){
targetElement = document.formsuivi.getElementById('tubes');
targetElement.style.display = "block" ;
}
elseif(rubrique==2){
targetElement = document.formsuivi.getElementById('declasses');
targetElement.style.display = "block" ;
}
elseif(rubrique==3){
targetElement = document.formsuivi.getElementById('transport');
targetElement.style.display = "block" ;
}
elseif(rubrique==4){
targetElement = document.formsuivi.getElementById('divers');
targetElement.style.display = "block" ;
}
}
</script> |
- Dans BODY (HTML) :
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
|
<form name="formsuivi" action="compta.php" method="post">
<!-- Liste déroulante, appel de la fonction JS lors du changement du choix de la liste déroulante
avec comme paramètre le numéro de l'élément sélectionné (commence à 0) -->
<b>Sélectionnez une rubrique :</b>
<SELECT name="rubriques" size="1" onChange="changerub(formsuivi.rubriques.selectedIndex);">
<OPTION value="listetouschoix" selected>Tous choix
<OPTION value="listetubes" >Tubes
<OPTION value="listedeclasses" >Déclassés
<OPTION value="listetransport" >Transport
<OPTION value="listedivers" >Divers
</SELECT>
<br />
<!-- Lot de cases à cocher pour la première catégorie
Paramètre display permet l'affiche ou non du bloc div
block >> Affiché
none >> Masqué -->
<div id="touschoix" style="display:block">
<input type='checkbox' name='expedparcode' />Expéditions par code CPS<br />
<input type='checkbox' name='listeavis' />Liste des avis
</div>
<!-- Lot de cases à cocher pour la deuxième catégorie -->
<div id="tubes" style="display:block">
<input type='checkbox' name='horseuropipe' />Hors Europipe<br />
<input type='checkbox' name='europipe' />Europipe<br />
<input type='checkbox' name='iran' />Iran<br />
<input type='checkbox' name='plaquettes' />Plaquettes
</div>
<!-- Lot de cases à cocher pour la troisième catégorie -->
<div id="declasses" style="display:block">
<input type='checkbox' name='parpostecommande' />Par poste de commande<br />
<input type='checkbox' name='parcommande' />Par commande
</div>
<!-- Lot de cases à cocher pour la quatrième catégorie -->
<div id="transport" style="display:block">
<input type='checkbox' name='transtschoix' />Tous choix
</div>
<!-- Lot de cases à cocher pour la cinquième catégorie -->
<div id="divers" style="display:block">
<input type='checkbox' name='fournitures' />Fournitures gratuites interservises LAF<br />
<input type='checkbox' name='suiviagp' />Suivi AGP<br />
<input type='checkbox' name='ziegel' />Ziegelander<br />
<input type='checkbox' name='dicut' />Dicut
</div> |
Je vous remercie par avance,
Alex
