1. Accueil
  2. Forum Codes-Sources
  3. Javascript / DHTML
Sujet Précédent Sujet Suivant

Masquer/afficher un div via un menu select

Résolu
cs_Quinze
Messages postés
6
Date d'inscription
mercredi 26 mars 2003
Statut
Membre
Dernière intervention
20 avril 2007
 - 20 avril 2007 à 01:46
cs_Quinze
Messages postés
6
Date d'inscription
mercredi 26 mars 2003
Statut
Membre
Dernière intervention
20 avril 2007
 - 20 avril 2007 à 13:22
bonjour à tous

je souhaiterai via un menu select de ce type:

               <form> 
               <select name="category" style="width:200px">
                  <option selected>- CATEGORY-</option>
                  <option value="01">01</option>
                  <option value="02">02</option>
                  <option value="03">03</option>
                </select>
               </form>

afficher ou masquer des
suivant l'option choisie:

j'utilise ce javascript qui permet d'afficher le div via son id et de masquer les autres.

<script language=javascript type='text/javascript'>
function showdiv(pass) {
var divs = document.getElementsByTagName('div');
for(i=0;i

ca marche super avec des liens du type: [javascript:showdiv('01') Option 01], mais je n'arrive pas à l'appliquer a mon menu select

si qqun pouvai m'aider ce serait super cool. je suis novice alors un peu d'indulgence

encore merci

xv

3 réponses

Réponse 1 / 3
cs_bultez
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
 32
20 avril 2007 à 13:04
    je ne sais pas pourquoi j'ai été mettre une boucle ici ?
        à cette heure là, pas ma dose d'alcool nécessaire, sans doute...

<script type="text/javascript">
    var p=document.getElementById("d1");
    function affiche(sel)
    {
        p.style.visibility="hidden";
        p=document.getElementById("d"+(sel.selectedIndex+1));
        p.style.visibility="visible";
    }
</script>

    ça suffit bien

<hr />


Cordialement            Bul     [mon Site]     [M'écrire]



<hr />
3
Réponse 2 / 3
cs_bultez
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
 32
20 avril 2007 à 06:36
Bonjour,

un ch'tit exemple alors....

un

deux

trois

<script type="text/javascript">
    function affiche(sel)
    {
        var n=1;
        while ( document.getElementById("d"+n) )
        {
            document.getElementById("d"+n).style.visibility="hidden";
            n++;
        }
        document.getElementById("d"+(sel.selectedIndex+1)).style.visibility="visible";
    }
</script>
<form>
   <select name="category" style="width:200px"
            onchange="affiche(this);"
            onfocus="this.selectedIndex=-1);">
            <optgroup label="-CATEGORY-">
                    <option>un</option>
                    <option>deux</option>
                    <option>trois</option>
                </optgroup>
   </select>
</form>

remarques : un id doit commencer par une lettre.
                      on commence par cacher tous les div id="d#"
                      on affiche celui correspondant au n° de ligne sélectionné
                            ( on aurait pu utiliser le .value, mais bof ... )
                      j'aime bien les <optgroup>
                      si le select n'a pas de size, ou s'il est =1,
                         la 1ère ligne est sélectionnées par défaut
                         ( d'où la séselection au focus )
                      on pouvait utiliser style.display="none" ou "inline"
à adapter à ce qu'il faut.

<hr />


Cordialement            Bul     [mon Site]     [M'écrire]



<hr />
0
Réponse 3 / 3
cs_Quinze
Messages postés
6
Date d'inscription
mercredi 26 mars 2003
Statut
Membre
Dernière intervention
20 avril 2007
20 avril 2007 à 13:22
je te remercie ca marche nickel

a+

xv
0