[RESOLU] Afficher / Masquer des DIV

Afficher / Masquer des DIV [RESOLU] - HTML/CSS - Programmation

Marsh Posté le 17-01-2007 à 09:03:47    

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. <script language="javascript">
  2.    
  3. // Fonction permettant l'affichage des cases à cocher en fonction de l'élément sélectionné dans la liste déroulante
  4. // Chaque "lot" de cases à cocher est regroupé dans un div, identifié par un id
  5. function changerub(rubrique){
  6. var targetElement;
  7. if(rubrique==0){
  8.    targetElement = document.formsuivi.getElementById('touschoix');
  9.    targetElement.style.display = "block" ;
  10. }
  11. elseif(rubrique==1){
  12.    targetElement = document.formsuivi.getElementById('tubes');
  13.    targetElement.style.display = "block" ;
  14. }
  15. elseif(rubrique==2){
  16.    targetElement = document.formsuivi.getElementById('declasses');
  17.    targetElement.style.display = "block" ;
  18. }
  19. elseif(rubrique==3){
  20.    targetElement = document.formsuivi.getElementById('transport');
  21.    targetElement.style.display = "block" ;
  22. }
  23. elseif(rubrique==4){
  24.    targetElement = document.formsuivi.getElementById('divers');
  25.    targetElement.style.display = "block" ;
  26. }
  27. }
  28. </script>


 
 
- Dans BODY (HTML) :
 

Code :
  1. <form name="formsuivi" action="compta.php" method="post">
  2. <!-- Liste déroulante, appel de la fonction JS lors du changement du choix de la liste déroulante
  3.      avec comme paramètre le numéro de l'élément sélectionné (commence à 0) -->
  4. <b>Sélectionnez une rubrique :</b>
  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. <br />
  13. <!-- Lot de cases à cocher pour la première catégorie
  14.      Paramètre display permet l'affiche ou non du bloc div
  15.      block >> Affiché
  16.      none >> Masqué -->
  17.   <div id="touschoix" style="display:block">
  18.    <input type='checkbox' name='expedparcode' />Expéditions par code CPS<br />
  19.    <input type='checkbox' name='listeavis' />Liste des avis
  20.   </div>
  21. <!-- Lot de cases à cocher pour la deuxième catégorie -->
  22.   <div id="tubes" style="display:block">
  23.    <input type='checkbox' name='horseuropipe' />Hors Europipe<br />
  24.    <input type='checkbox' name='europipe' />Europipe<br />
  25.    <input type='checkbox' name='iran' />Iran<br />
  26.    <input type='checkbox' name='plaquettes' />Plaquettes
  27.   </div>
  28. <!-- Lot de cases à cocher pour la troisième catégorie -->
  29.   <div id="declasses" style="display:block">
  30.    <input type='checkbox' name='parpostecommande' />Par poste de commande<br />
  31.    <input type='checkbox' name='parcommande' />Par commande
  32.   </div>
  33. <!-- Lot de cases à cocher pour la quatrième catégorie -->
  34.   <div id="transport" style="display:block">
  35.    <input type='checkbox' name='transtschoix' />Tous choix
  36.   </div>
  37. <!-- Lot de cases à cocher pour la cinquième catégorie -->
  38.   <div id="divers" style="display:block">
  39.    <input type='checkbox' name='fournitures' />Fournitures gratuites interservises LAF<br />
  40.    <input type='checkbox' name='suiviagp' />Suivi AGP<br />
  41.    <input type='checkbox' name='ziegel' />Ziegelander<br />
  42.    <input type='checkbox' name='dicut' />Dicut
  43.    </div>


 
Je vous remercie par avance,
Alex


Message édité par Bounty59 le 17-01-2007 à 10:31:10
Reply

Marsh Posté le 17-01-2007 à 09:03:47   

Reply

Marsh Posté le 17-01-2007 à 09:10:34    

Passe this.selectedIndex dans le onchange ça sera plus simple!
 
Et tu pourrais améliorer un peu ta fonction:

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


note:code écrit sans vérification et de bon matin donc s'pas garanti hein :o

Reply

Marsh Posté le 17-01-2007 à 09:56:16    

Merci beaucoup pour ta réponse.
J'ai rectifié le paramètre du OnChange, et remplacé ma fonction par la tienne, mais ça ne fonctionne toujours pas.
Même erreur Javascript : "Objet non-trouvé", qui n'apparait plus dès que je mets l'appel de la fonction en commentaire (donc le souci vient bien de là).
 
Au fait, que signifie :
 

Code :
  1. document.getElementById(divIds[i]).style.display = (i==rubrique)?'block':'none';


 
Ca inverse la valeur de la propriété display ?
 
   

Reply

Marsh Posté le 17-01-2007 à 10:19:30    

chez moi ça marche ^^ [:dawa] ( le code exact utilisé plus bas)
 
La ligne sur laquelle tu t'interroges alors:

Code :
  1. i==rubrique)?'block':'none'


c'est la forme courte de  

Code :
  1. if ( i == rubrique){
  2.   /* ... */
  3. }else{
  4. /* .... */
  5. }


donc en gros ça veut dire que la propriété display est mise à block si i égale rubrique et à none sinon ( belle correction de ma boulette au passage).
 
code utilisé pour tester ton truc:

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
  4. <head>
  5.   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  6.   <title>Exemple</title>
  7.   <script type="text/javascript">
  8.   function changerub(rubrique){
  9.     var divIds= new Array('touschoix', 'tubes', 'declasses', 'transport', 'divers');
  10.     for(var i=0; i<divIds.length;i++){
  11.       document.getElementById(divIds[i]).style.display = (i==rubrique)?'block':'none';
  12.     }
  13.   }
  14. </script>
  15. </head>
  16. <body>
  17.     <form name="formsuivi" action="compta.php" method="post">
  18.    
  19.     <!-- Liste déroulante, appel de la fonction JS lors du changement du choix de la liste déroulante
  20.         avec comme paramètre le numéro de l'élément sélectionné (commence à 0) -->
  21.     <b>Sélectionnez une rubrique :</b>
  22.    
  23.        <SELECT name="rubriques" size="1" onChange="changerub(formsuivi.rubriques.selectedIndex);">
  24.        <OPTION value="listetouschoix" selected>Tous choix
  25.        <OPTION value="listetubes" >Tubes
  26.        <OPTION value="listedeclasses" >Déclassés
  27.        <OPTION value="listetransport" >Transport
  28.        <OPTION value="listedivers" >Divers
  29.        </SELECT> 
  30.    
  31.     <br />
  32.    
  33.     <!-- Lot de cases à cocher pour la première catégorie
  34.         Paramètre display permet l'affiche ou non du bloc div
  35.         none >> Affiché
  36.         none >> Masqué -->
  37.    
  38.      <div id="touschoix" style="display:none">
  39.       <input type='checkbox' name='expedparcode' />Expéditions par code CPS<br />
  40.       <input type='checkbox' name='listeavis' />Liste des avis
  41.      </div>
  42.    
  43.     <!-- Lot de cases à cocher pour la deuxième catégorie -->
  44.      <div id="tubes" style="display:none">
  45.       <input type='checkbox' name='horseuropipe' />Hors Europipe<br />
  46.       <input type='checkbox' name='europipe' />Europipe<br />
  47.       <input type='checkbox' name='iran' />Iran<br />
  48.       <input type='checkbox' name='plaquettes' />Plaquettes
  49.      </div>
  50.    
  51.     <!-- Lot de cases à cocher pour la troisième catégorie -->
  52.      <div id="declasses" style="display:none">
  53.       <input type='checkbox' name='parpostecommande' />Par poste de commande<br />
  54.       <input type='checkbox' name='parcommande' />Par commande
  55.      </div>
  56.    
  57.     <!-- Lot de cases à cocher pour la quatrième catégorie -->
  58.      <div id="transport" style="display:none">
  59.       <input type='checkbox' name='transtschoix' />Tous choix
  60.      </div>
  61.    
  62.     <!-- Lot de cases à cocher pour la cinquième catégorie -->
  63.      <div id="divers" style="display:none">
  64.       <input type='checkbox' name='fournitures' />Fournitures gratuites interservises LAF<br />
  65.       <input type='checkbox' name='suiviagp' />Suivi AGP<br />
  66.       <input type='checkbox' name='ziegel' />Ziegelander<br />
  67.       <input type='checkbox' name='dicut' />Dicut
  68.       </div>
  69.     </form>
  70. </body>
  71. </html>

Reply

Marsh Posté le 17-01-2007 à 10:30:42    

Merci mille fois pour ton aide précieuse, ça fonctionne !!
 
 :jap:  

Reply

Marsh Posté le 18-04-2007 à 11:51:59    

j'essai en ce moment de faire la même chose que celà mais sans formulaire. Avec de simple boutons comme éléments d'action.
 
Comment dois je m'y prendre ? j'ai essayer de trafficoter ce code mais je n'ai pas réussi à le faire fonctionner à ma sauce.
 
En fait j'ai 5 liens chacun affiche un div en particulier, tout en masquant les autres, comme avec l'exemple ci dessus.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed