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
- Messages postés
- 6
- Date d'inscription
- mercredi 26 mars 2003
- Statut
- Membre
- Dernière intervention
- 20 avril 2007
A voir également:
- Javascript select
- Select javascript - Meilleures réponses
- Afficher div javascript - Meilleures réponses
- Javascript : Select backgroundcolor - CodeS SourceS - Guide
- Javascript : Sélection de smileys avec javascript - CodeS SourceS - Guide
- Recupérer la valeur d'un select ✓ - Forum - Javascript / DHTML
- Ajouter une Option dans un Select ✓ - Forum - Javascript / DHTML
- Javascript select image ✓ - Forum - Javascript / DHTML
3 réponses
Meilleure réponse
- Messages postés
- 13619
- Date d'inscription
- jeudi 13 février 2003
- Statut
- Membre
- Dernière intervention
- 15 octobre 2013
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 />
à 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 />
Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire
189 internautes nous ont dit merci ce mois-ci
- Messages postés
- 13619
- Date d'inscription
- jeudi 13 février 2003
- Statut
- Membre
- Dernière intervention
- 15 octobre 2013
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 />
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 />