Discussion :

[Bounty59]

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 :

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

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

[SpaceFrog]

faut penser à fermer les balises option ...

et puis pour la clareté du code utilise plutot un switch(rubrique) ...

et puis la tout est en display block alors changer de block à block ???

[Bounty59]

Merci pour ta réponse.

J'ai fermé mes balises options (c'était un oubli, mais elles semblent facultatives).

J'ai modifié ma fonction pour qu'elle inverse la valeur de la propriété display de l'élément à afficher. Ca ne fonctionne toujours pas. Même erreur JS ("Objet attendu").

En attendant de trouver une solution à l'affichage /masquage des cases à cocher, j'avais affiché toutes les DIV, d'où leur paramètre par défaut à block.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
 
function changerub(rubrique){  
 
var divIds= new Array('touschoix', 'tubes', 'declasses', 'transport', 'divers');  
 
for(var i=0; i<divIds.length;i++)
   {    
     document.getElementById(divIds[i]).style.display = (i==rubrique)?'block':'none';  
   }
}

Une autre idée ?

[Bounty59]

Problème résolu avec la fonction indiquée ci-dessus !
Merci quand même