Montrer/cacher des div?

tryan · 4 Septembre 2010

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:

   <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 · 4 Septembre 2010

P'têtre comme ça ?

Code:

<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 · 4 Septembre 2010

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 · 4 Septembre 2010

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

Schwarzer Stern · 4 Septembre 2010

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

seebz · 4 Septembre 2010

Schwarzer Stern a dit:
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 · 4 Septembre 2010

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

Schwarzer Stern · 4 Septembre 2010

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

Code:

<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 · 4 Septembre 2010

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 · 6 Septembre 2010

seebz a dit:
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 · 6 Septembre 2010

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

.
Merci

tryan · 7 Septembre 2010

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:

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

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:

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:

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