Montrer/cacher des div?

[tryan]

Bonjour,

Je tente en vint de montrer/cacher un élément div par le biais d'un formulaire. Le soucis que je rencontre est que lorsque que je choisis une première option, l'élément caché s'affiche bien mais si je choisis une autre option, c'est la première sélection qui reste affiché!!
En gros, je cherche à affiché le div correspondant à la sélection souhaité. Si pas de div, je n'affiche rien.

Code: Tout sélectionner

   <script language="javascript" type="text/javascript">
function bascule(elem)
   {
   etat=document.getElementById(elem).style.display;
   if(etat=="none"){
   document.getElementById(elem).style.display="block";//affiche l'élément
   }
   else{
   document.getElementById(elem).style.display="none";//masque l'élément
   }
   }
</script>
<select name="categorie">
        <option value="0">«Choisissez la cat&eacute;gorie»</option>
         <option value='2' onclick="bascule('boite2');">Voitures</option>
         <option value='3' onclick="bascule('boite3');">Motos</option>
         <option value='4'>Caravaning</option>
      </select>
</p>
<div id='boite2' style='display:none;'>
<p>blabla</p>
</div>
<div id='boite3' style='display:none;'>
<p>Blabla</p>
</div>

Merci

[seebz]

P'têtre comme ça ?

Code: Tout sélectionner

<script language="javascript" type="text/javascript">
function afficheBoite(num) {
   var maxBoite = 3; // Indiquer ici le nombre maximale de boite possible
   for (var i = 1; i <= maxBoite; i++) {
      var boite = document.getElementById('boite'+i);
      if (boite) {
         if (i == num) {
            boite.style.display = 'block';
         } else {
            boite.style.display = 'none';
         }
      }
   }
}
</script>
<select name="categorie">
   <option value="0">«Choisissez la cat&eacute;gorie»</option>
   <option value='2' onclick="afficheBoite(2);">Voitures</option>
   <option value='3' onclick="afficheBoite(3);">Motos</option>
   <option value='4'>Caravaning</option>
</select>
</p>
<div id='boite2' style='display:none;'>
   <p>blabla</p>
</div>
<div id='boite3' style='display:none;'>
   <p>Blabla</p>
</div>

[Aaarrrgggh]

Le code serait moins barbare avec une librairie JS

Mais sinon comme dit Seebz, tu es obligé de réinitialiser le statut de chaque élément à chaque fois, par l'intermédiaire d'une boucle.

[seebz]

Aaarrrgggh: Ce serait quand même dommage de sortir la grosse artillerie pour ça nan ?

[Schwarzer Stern]

Tu peux aussi stocker l'id du dernier élément masqué dans une variable que tu réutiliseras ensuite

[seebz]

Tu peux aussi stocker l'id du dernier élément masqué dans une variable que tu réutiliseras ensuite

+1, ca éviterai de boucler sur tous les éléments

[tryan]

Merci à vous , cela fonctionne très bien.

Tu peux aussi stocker l'id du dernier élément masqué dans une variable que tu réutiliseras ensuite

ça nécessiterait de recharger la page en cours, non ?
Si vous avez une "démo" sous le coude, je suis preneur

[Schwarzer Stern]

Non pas de rechargement. Vite fait ça donne ça :

Code: Tout sélectionner

<script type="text/javascript">
var ancien;
function masquer(idbloc){
if(ancien!=""){
  document.getElementById(ancien).style.display='block';
}
document.getElementById(idbloc).style.display='none';
ancien=idbloc;
}
</script>

<div id="premierbloc" onclick="masquer(this.id)">Salut</div>
<div id="bloc2" onclick="masquer(this.id)">Ça va ?</div>


Edit : puisque tu pars avec des div en display=none , tu n'as qu'à inverser block et none dans mon JS.

[idefix]

Je te conseille de ne pas te prendre la tête à essayer d'identifier l'état actuel de tes div.
Lors d'un changement de sélection :
- Etape 1 : Tu caches l'ensemble des div
- Etape 2 : Tu passes en display block le div correspondant à l'id sélectionné.

[Aaarrrgggh]

Aaarrrgggh: Ce serait quand même dommage de sortir la grosse artillerie pour ça nan ?

dans le cas où il y aurait ailleurs d'autres codes JS

[tryan]

Je suis resté sur la version du code de seebz qui me convient bien pour le moment .
Merci

[tryan]

Re bonjour,

Je suis confronté à un nouveau problème . J'utilise donc le script de "seebz" pour montrer/cacher diverses éléments et notamment des formulaires.

Code: Tout sélectionner

<script language="javascript" type="text/javascript">
function afficheBoite(num) {
   var maxBoite = 3; // Indiquer ici le nombre maximale de boite possible
   for (var i = 1; i <= maxBoite; i++) {
      var boite = document.getElementById('boite'+i);
      if (boite) {
         if (i == num) {
            boite.style.display = 'block';
         } else {
            boite.style.display = 'none';
         }
      }
   }
}
</script>
<select name="categorie">
   <option value="0">«Choisissez la cat&eacute;gorie»</option>
   <option value='1' onclick="afficheBoite(1);">+++</option>
   <option value='2' onclick="afficheBoite(2);">+++</option>
   <option value='3' onclick="afficheBoite(3);">+++</option>
</select>

<div id='boite1' style='display:none;'>
<select name="departement1" id="1" onChange="document.getELementById(2').options.length=0;">
<option value="0">«Choisissez»</option>
<option value="1" <?php if($departement1==1){echo "selected='selected'";}?>>++</option>
<option value="2" <?php if($departement1==2){echo "selected='selected'";}?>>++</option>
</select>
</div>

<div id='boite2' style='display:none;'>
<select name="departement2" id="2" onChange="document.getELementById('1').options.length=0;">
<option value="0">«Choisissez»</option>
<option value="1" <?php if($departement2==1){echo "selected='selected'";}?>>++</option>
<option value="2" <?php if($departement2==2){echo "selected='selected'";}?>>++</option>
</select>
</div>


J'utilise le bout de code

Code: Tout sélectionner

id="1" onChange="document.getELementById('2').options.length=0;"

pour vider le select du formulaire id="2" et inversement pour vider le select du formulaire id="1" avec celui-ci

Code: Tout sélectionner

id="2" onChange="document.getELementById('1').options.length=0;"

Mon soucis réside dans le faite qui y a un 3ieme formulaire (voir plus) ouvert grace à la fonction <option value='3' onclick="afficheBoite(3);">+++</option> et visiblement la fonction document.getELementById() ne peut comporter plusieurs id...

Un exemple de ce que je souhaite réaliser et qui ne fonctionne pas :

Code: Tout sélectionner

id="3" onChange="document.getELementById('1','2').options.length=0;"

Dans cette exemple, l'idée est de vider les formulaire de l'id 1 et 2.

Une suggestion ?
Merci