[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
  6. function changerub(rubrique){
  8. var targetElement;
  10. if(rubrique==0){
  11.    targetElement = document.formsuivi.getElementById('touschoix');
  12.    targetElement.style.display = "block" ;
  13. }
  14. elseif(rubrique==1){
  15.    targetElement = document.formsuivi.getElementById('tubes');
  16.    targetElement.style.display = "block" ;
  17. }
  18. elseif(rubrique==2){
  19.    targetElement = document.formsuivi.getElementById('declasses');
  20.    targetElement.style.display = "block" ;
  21. }
  22. elseif(rubrique==3){
  23.    targetElement = document.formsuivi.getElementById('transport');
  24.    targetElement.style.display = "block" ;
  25. }
  26. elseif(rubrique==4){
  27.    targetElement = document.formsuivi.getElementById('divers');
  28.    targetElement.style.display = "block" ;
  29. }
  31. }
  33. </script>


 
 
- Dans BODY (HTML) :
 

Code :
  1. <form name="formsuivi" action="compta.php" method="post">
  3. <!-- Liste déroulante, appel de la fonction JS lors du changement du choix de la liste déroulante
  4.      avec comme paramètre le numéro de l'élément sélectionné (commence à 0) -->
  5. <b>Sélectionnez une rubrique :</b>
  7.     <SELECT name="rubriques" size="1" onChange="changerub(formsuivi.rubriques.selectedIndex);">
  8.     <OPTION value="listetouschoix" selected>Tous choix
  9.     <OPTION value="listetubes" >Tubes
  10.     <OPTION value="listedeclasses" >Déclassés
  11.     <OPTION value="listetransport" >Transport
  12.     <OPTION value="listedivers" >Divers
  13.     </SELECT> 
  15. <br />
  17. <!-- Lot de cases à cocher pour la première catégorie
  18.      Paramètre display permet l'affiche ou non du bloc div
  19.      block >> Affiché
  20.      none >> Masqué -->
  22.   <div id="touschoix" style="display:block">
  23.    <input type='checkbox' name='expedparcode' />Expéditions par code CPS<br />
  24.    <input type='checkbox' name='listeavis' />Liste des avis
  25.   </div>
  27. <!-- Lot de cases à cocher pour la deuxième catégorie -->
  28.   <div id="tubes" style="display:block">
  29.    <input type='checkbox' name='horseuropipe' />Hors Europipe<br />
  30.    <input type='checkbox' name='europipe' />Europipe<br />
  31.    <input type='checkbox' name='iran' />Iran<br />
  32.    <input type='checkbox' name='plaquettes' />Plaquettes
  33.   </div>
  35. <!-- Lot de cases à cocher pour la troisième catégorie -->
  36.   <div id="declasses" style="display:block">
  37.    <input type='checkbox' name='parpostecommande' />Par poste de commande<br />
  38.    <input type='checkbox' name='parcommande' />Par commande
  39.   </div>
  41. <!-- Lot de cases à cocher pour la quatrième catégorie -->
  42.   <div id="transport" style="display:block">
  43.    <input type='checkbox' name='transtschoix' />Tous choix
  44.   </div>
  46. <!-- Lot de cases à cocher pour la cinquième catégorie -->
  47.   <div id="divers" style="display:block">
  48.    <input type='checkbox' name='fournitures' />Fournitures gratuites interservises LAF<br />
  49.    <input type='checkbox' name='suiviagp' />Suivi AGP<br />
  50.    <input type='checkbox' name='ziegel' />Ziegelander<br />
  51.    <input type='checkbox' name='dicut' />Dicut
  52.    </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) -->
  22.     <b>Sélectionnez une rubrique :</b>
  23.    
  24.        <SELECT name="rubriques" size="1" onChange="changerub(formsuivi.rubriques.selectedIndex);">
  25.        <OPTION value="listetouschoix" selected>Tous choix
  26.        <OPTION value="listetubes" >Tubes
  27.        <OPTION value="listedeclasses" >Déclassés
  28.        <OPTION value="listetransport" >Transport
  29.        <OPTION value="listedivers" >Divers
  30.        </SELECT> 
  31.    
  32.     <br />
  33.    
  34.     <!-- Lot de cases à cocher pour la première catégorie
  35.         Paramètre display permet l'affiche ou non du bloc div
  36.         none >> Affiché
  37.         none >> Masqué -->
  38.    
  39.      <div id="touschoix" style="display:none">
  41.       <input type='checkbox' name='expedparcode' />Expéditions par code CPS<br />
  42.       <input type='checkbox' name='listeavis' />Liste des avis
  43.      </div>
  44.    
  45.     <!-- Lot de cases à cocher pour la deuxième catégorie -->
  46.      <div id="tubes" style="display:none">
  47.       <input type='checkbox' name='horseuropipe' />Hors Europipe<br />
  48.       <input type='checkbox' name='europipe' />Europipe<br />
  49.       <input type='checkbox' name='iran' />Iran<br />
  51.       <input type='checkbox' name='plaquettes' />Plaquettes
  52.      </div>
  53.    
  54.     <!-- Lot de cases à cocher pour la troisième catégorie -->
  55.      <div id="declasses" style="display:none">
  56.       <input type='checkbox' name='parpostecommande' />Par poste de commande<br />
  57.       <input type='checkbox' name='parcommande' />Par commande
  58.      </div>
  59.    
  60.     <!-- Lot de cases à cocher pour la quatrième catégorie -->
  61.      <div id="transport" style="display:none">
  63.       <input type='checkbox' name='transtschoix' />Tous choix
  64.      </div>
  65.    
  66.     <!-- Lot de cases à cocher pour la cinquième catégorie -->
  67.      <div id="divers" style="display:none">
  68.       <input type='checkbox' name='fournitures' />Fournitures gratuites interservises LAF<br />
  69.       <input type='checkbox' name='suiviagp' />Suivi AGP<br />
  70.       <input type='checkbox' name='ziegel' />Ziegelander<br />
  71.       <input type='checkbox' name='dicut' />Dicut
  72.       </div>
  74.     </form>
  75. </body>
  76. </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