Selection une option Afficher/masquer des div !

[Résolu]
Signaler
Messages postés
503
Date d'inscription
mercredi 29 décembre 2004
Statut
Membre
Dernière intervention
20 mars 2012
-
Messages postés
503
Date d'inscription
mercredi 29 décembre 2004
Statut
Membre
Dernière intervention
20 mars 2012
-
Bonjour,
j ai une liste (select) avec deux options, ce que je veux faire :
lorsque je selectionne une option j affiche un div (contient les informations de cette option) et je masque un autre div (qui les informations  du 2eme option).
j ai fait ce script :
<script langage="JavaScript">

function aDuree(thingId,thingId2)

{

var targetElement; var targetElement2;

targetElement = document.getElementById(thingId) ;

targetElement.style.display = "" ;

targetElement2 = document.getElementById(thingId2) ;

targetElement2.style.display = "none" ;

}

</script>

et dans le code html
<select id="duree" name="duree">

<option value="d" onSelect="javascript:aDuree('Div7','Div8');">Saisir dur&eacute;e</option>

<option value="df" onSelect="javascript:aDuree('Div8','Div7');">Saisir D&eacute;but / Fin</option>

</select>

mais ça ne marche pas , pouvez vous m aider, merci.

N'importe où. 
mais là où il le faut.

10 réponses

Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
bonjour,

   onselect ? pas permis sur un select, si ?
   pas d'évènements sur option ( enfin, pour IE, avec FF ça baignerait )
         il faut mettre sur la balise select....

<script type="text/JavaScript">
function appel(sel)
{ switch (sel.selectedIndex)
  { case 0:
      aDuree('Div7','Div8');
      break;
   case 1:
      aDuree('Div8','Div7');
      break;  
  }
}

function aDuree(thingId,thingId2)
{ document.getElementById(thingId).style.display = "" ;
  document.getElementById(thingId2).style.display = "none" ;
}




</script>

<select id="duree" name="duree"
   onchange="appel(this);">





<option value="d">Saisir dur&eacute;e</option>
<option value="df">Saisir D&eacute;but / Fin</option>
</select>






infos option 1

infos option 2





largement améliorable, mais j'ai voulu "conserver l'origine".

remarques sur select : s'il ne possède pas de size ( ou si ce
   size=1 ), la 1ère ligne est sélectionnée par défaut,
   c'est pour ça que j'ai ajouté display:none sur Div8.
   ( on peut aussi, faire autrement, style 
      onfocus=this.selectedIndex=-1; )






<hr />
            Cordialement          Bul       [mon Site]    [M'écrire]
<hr />                                    En général, c'est absurde de généraliser.
Messages postés
503
Date d'inscription
mercredi 29 décembre 2004
Statut
Membre
Dernière intervention
20 mars 2012

j ai oublié à ajouté :
aussi dans le code html

infos option 1

infos option 2

Merci pour vos aides

N'importe où. 
mais là où il le faut.
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
au fait...
<option value="d">Saisir durée</option>
<option value="df">Saisir Début / Fin</option>
ça baigne aussi.
<hr />
                        Cordialement       Bul       [mon Site]    [M'écrire]
<hr />

                                                            En général, c'est absurde de généraliser.
Messages postés
503
Date d'inscription
mercredi 29 décembre 2004
Statut
Membre
Dernière intervention
20 mars 2012

Merci bcp pour ta reponse !

Stp, si je veux faire comme cela :

<select id="duree" name="duree"
   onchange="appel(this);"><option value="0">Selectionner une option</option>
<option value="d">Saisir duree</option>
<option value="df">Saisir Debut / Fin</option>
</select>

lors de la selection de l option = 0, les deux Divs se masquent ?
Merci encore une fois

N'importe où. 
mais là où il le faut.
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
>>les deux Divs se masquent ?
    c'est une affirmation ou c'est ce que tu voudrais faire ?

dans la function appel, on teste qu'elle ligne a été choisie.
     ...

switch (sel.selectedIndex)...

                fais-y ce que tu veux.



<hr />




Cordialement                Bul         [mon Site]     [M'écrire]<hr />
En général, c'est absurde de généraliser.
Messages postés
503
Date d'inscription
mercredi 29 décembre 2004
Statut
Membre
Dernière intervention
20 mars 2012

Normalement,
c ce que je veux faire,
mais comment masquer DIV7 et DIV 8 en meme temps si je selectionne "selectionnez une option" ?
merci

N'importe où. 
mais là où il le faut.
Messages postés
503
Date d'inscription
mercredi 29 décembre 2004
Statut
Membre
Dernière intervention
20 mars 2012

Bon j ai fais une solution un peu banal mais ça fonctionne :
<script type="text/JavaScript">
function appel(sel)
{ switch (sel.selectedIndex)
  { 
case 0:
      aDuree('Div7','Div8');
      break;
case 1:
      aDuree('Div7','Div8');
      break;
   case 2:
      aDuree('Div8','Div7');
      break;  
  }
}

function aDuree(thingId,thingId2)
{ document.getElementById(thingId).style.display = "" ;
  document.getElementById(thingId2).style.display = "none" ;
}
function aDuree1(thingId,thingId2)
{ document.getElementById(thingId).style.display = "none" ;
  document.getElementById(thingId2).style.display = "none" ;
}
N'importe où. 
mais là où il le faut.
Messages postés
503
Date d'inscription
mercredi 29 décembre 2004
Statut
Membre
Dernière intervention
20 mars 2012

correction :
 
case 0:
      aDuree1('Div7','Div8');
      break;

N'importe où. 
mais là où il le faut.
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
>>

case 0:
      aDuree1('Div7','Div8');
      break;

par exemple, ou directement ?

case 0:
 


document.getElementById('Div7').style.display = "none" ;
  document.getElementById('Div8').style.display = "none" ;
  break;




<hr />




Cordialement                Bul         [mon Site]     [M'écrire]
<hr />


En général, c'est absurde de généraliser.
Messages postés
503
Date d'inscription
mercredi 29 décembre 2004
Statut
Membre
Dernière intervention
20 mars 2012

oui tu as raison,
bien vu !
merci bcp pour ton aide

N'importe où. 
mais là où il le faut.