Rechercher
Se connecter avec
S'enregistrer | Connectez-vous

[RESOLU] Afficher / Masquer des DIV

Dernière réponse : dans Programmation
Partagez

Bonjour,

Je rencontre un petit souci.
J'ai une liste déroulante contenant 5 éléments.
Je souhaiterais que lorsqu'un élément est sélectionné, des cases à cocher correspondantes s'affichent, en dessous de la liste déroulante. Puis que ces cases soient remplacées par d'autres en cas de changement de sélection dans la liste déroulante.

Voici mon code :

- Dans HEAD :

  1. <script language='javascript'>
    

  2.  
  3. function changerub(rubrique){
    

  4.  if(rubrique==0){
    

  5.    document.write("<table width = '50%'><tr><input type='checkbox' name='expedparcode' />Expéditions par code CPS</tr>
    

  6.    <tr><input type='checkbox' name='listeavis' />Liste des avis</tr><table>");
    

  7.  }
    

  8.  elseif(rubrique==1){
    

  9.    document.write("<table width = '50%'><tr><input type='checkbox' name='horseuropipe' />Hors Europipe</tr>
    

  10.    <tr><input type='checkbox' name='europipe' />Europipe</tr>
    

  11.    <tr><input type='checkbox' name='iran' />Iran</tr>
    

  12.    <tr><input type='checkbox' name='plaquettes' />Plaquettes</tr></table>");
    

  13.  }
    

  14.  elseif(rubrique==2){
    

  15.    document.write("<table width = '50%'><tr><input type='checkbox' name='parpostecommande' />Par poste de commande</tr>
    

  16.    <tr><input type='checkbox' name='parcommande' />Par commande</tr></table>");
    

  17.  }
    

  18.  elseif(rubrique==3){
    

  19.   document.write("<table width = '50%'><tr><input type='checkbox' name='transtschoix' />Tous choix</tr></table>");
    

  20.  }
    

  21.  elseif(rubrique==4){
    

  22.   document.write("<table width = '50%'><tr><input type='checkbox' name='fournitures' />Fournitures gratuites interservises LAF</tr>
    

  23.    <tr><input type='checkbox' name='suiviagp' />Suivi AGP</tr>
    

  24.    <tr><input type='checkbox' name='ziegel' />Ziegelander</tr>
    

  25.    <tr><input type='checkbox' name='dicut' />Dicut</tr></table>");
    

  26.  }
    

  27. }
    

  28.  
  29. </script>



- Dans BODY :

  1. <form name="formrub" action="" method="post">
    

  2.     <b>Sélectionnez une rubrique :</b><br />
    

  3.     <SELECT name="rubrique" size="1" onChange="changerub(formrub.rubrique.selectedIndex)">
    

  4.     <OPTION selected>Tous choix
    

  5.     <OPTION>Tubes
    

  6.     <OPTION>Déclassés
    

  7.     <OPTION>Transport
    

  8.     <OPTION>Divers
    

  9.   </SELECT></form>


>> La liste déroulante s'affiche correctement mais rien ne se produit lorsque je change la sélection.

Je vous remercie par avance pour votre aide,
Alex

Autres pages sur : resolu afficher masquer div

Lassé par la pub ? Créez un compte

Bonjour,

... Et merci pour votre réponse.
J'ai donc modifié mon code, et regroupé chaque "lot" de cases à cocher dans des DIV distinctes, comme ça.

  1. <div id="casesTouschoix" style="display:none">
    

  2.    <table width="50%"><tr><input type='checkbox' name='expedparcode' />Expéditions par code CPS</tr>
    

  3.    <tr><input type='checkbox' name='listeavis' />Liste des avis</tr></table>
    

  4.   </div> 
    

  5.  
  6.   <div id="casesTubes" style="display:none">
    

  7.    <table width="50%"><tr><input type='checkbox' name='horseuropipe' />Hors Europipe</tr>
    

  8.    <tr><input type='checkbox' name='europipe' />Europipe</tr>
    

  9.    <tr><input type='checkbox' name='iran' />Iran</tr>
    

  10.    <tr><input type='checkbox' name='plaquettes' />Plaquettes</tr></table>
    

  11.   </div> 
    

  12.  
  13.   <div id="casesDeclasses" style="display:none">
    

  14.    <table width="50%"><tr><input type='checkbox' name='parpostecommande' />Par poste de commande</tr>
    

  15.    <tr><input type='checkbox' name='parcommande' />Par commande</tr></table>
    

  16.   </div> 
    

  17.  
  18.   <div id="casesTransport" style="display:none">
    

  19.    <table width="50%"><tr><input type='checkbox' name='transtschoix' />Tous choix</tr></table>
    

  20.   </div>
    

  21.  
  22.   <div id="casesDivers" style="display:none">
    

  23.    <table width="50%"><tr><input type='checkbox' name='fournitures' />Fournitures gratuites interservises LAF</tr>
    

  24.    <tr><input type='checkbox' name='suiviagp' />Suivi AGP</tr>
    

  25.    <tr><input type='checkbox' name='ziegel' />Ziegelander</tr>
    

  26.    <tr><input type='checkbox' name='dicut' />Dicut</tr></table>
    

  27.    </div>


Par défaut, j'ai mis la propriété display de chaque div à "none", car aucune case ne doit être affichée au départ.

Par contre, comment changer la valeur de cette propriété en javascript, pour afficher ou non les groupes de cases à cocher en fonction de l'élément sélectionné dans la liste déroulante ?...

J'ai essayé ça, mais ça ne semble pas fonctionner :

- HTML :

  1. <form name="formsuivi" action="compta.php" method="post">
    

  2.  
  3.     <b>Sélectionnez une rubrique :</b>
    

  4.  
  5.     <SELECT name="rubrique" size="1" onChange="changerub(formsuivi.rubrique.selectedIndex)">
    

  6.     <OPTION value="listetouschoix" selected>Tous choix
    

  7.     <OPTION value="listetubes" >Tubes
    

  8.     <OPTION value="listedeclasses" >Déclassés
    

  9.     <OPTION value="listetransport" >Transport
    

  10.     <OPTION value="listedivers" >Divers
    

  11.     </SELECT>
    

  12.  
  13. [...]
    

  14.  
  15. </form>



- JAVASCRIPT : 

  1. function changerub(rubrique){
    

  2.  if(rubrique==0){
    

  3.    var targetElement;
    

  4.    targetElement = document.formsuivi.getElementById('touschoix');
    

  5.    targetElement.style.display = "" ;
    

  6.  }
    

  7.  elseif(rubrique==1){
    

  8.    var targetElement;
    

  9.    targetElement = document.formsuivi.getElementById('tubes');
    

  10.    targetElement.style.display = "" ;
    

  11.  }
    

  12.  elseif(rubrique==2){
    

  13.    var targetElement;
    

  14.    targetElement = document.formsuivi.getElementById('declasses');
    

  15.    targetElement.style.display = "" ;
    

  16.  }
    

  17.  elseif(rubrique==3){
    

  18.    var targetElement;
    

  19.    targetElement = document.formsuivi.getElementById('transport');
    

  20.    targetElement.style.display = "" ;
    

  21.  }
    

  22.  elseif(rubrique==4){
    

  23.    var targetElement;
    

  24.    targetElement = document.formsuivi.getElementById('divers');
    

  25.    targetElement.style.display = "" ;
    

  26.  }
    

  27. }


Merci par avance,
Alex
Contenus similaires
Posez votre question

Merci, j'ai fait la modif. Mais toujours rien... A part une erreur Javascript. :sarcastic: 

>> "Objet attendu"

  1. function changerub(rubrique){
    

  2.  
  3. var targetElement;
    

  4.  
  5. if(rubrique==0){
    

  6.    targetElement = document.formsuivi.getElementById('touschoix');
    

  7.    targetElement.style.display = "block" ;
    

  8.  }
    

  9.  elseif(rubrique==1){
    

  10.    targetElement = document.formsuivi.getElementById('tubes');
    

  11.    targetElement.style.display = "block" ;
    

  12.  }
    

  13.  elseif(rubrique==2){
    

  14.    targetElement = document.formsuivi.getElementById('declasses');
    

  15.    targetElement.style.display = "block" ;
    

  16.  }
    

  17.  elseif(rubrique==3){
    

  18.    targetElement = document.formsuivi.getElementById('transport');
    

  19.    targetElement.style.display = "block" ;
    

  20.  }
    

  21.  elseif(rubrique==4){
    

  22.    targetElement = document.formsuivi.getElementById('divers');
    

  23.    targetElement.style.display = "block" ;
    

  24.  }
    

  25. }



  1. <form name="formsuivi" action="compta.php" method="post">
    

  2.  
  3.     <b>Sélectionnez une rubrique :</b>
    

  4.  
  5.     <SELECT name="rubriques" size="1" onChange="changerub(formsuivi.rubriques.selectedIndex);">
    

  6.     <OPTION value="listetouschoix" selected>Tous choix
    

  7.     <OPTION value="listetubes" >Tubes
    

  8.     <OPTION value="listedeclasses" >Déclassés
    

  9.     <OPTION value="listetransport" >Transport
    

  10.     <OPTION value="listedivers" >Divers
    

  11.     </SELECT>
    

  12.  
  13. [...]
    

  14. </form>


Merci beaucoup à qui pourra m'aider !
Lassé par la pub ? Créez un compte
 
Posez votre question