montrer/cacher div a partir d'un <select><option>

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : montrer/cacher div a partir d'un <select><option>

sgioani

Bonjour,
j'ai cherche partout comment afficher/masquer une DIV en CSS et avec une fonction javascript, dans un <select>,
les solutions trouvees dans les forums et tutos sont a peu pres les memes partout (j'en ai teste plusieurs).
pour des balises en ligne, pas de probleme avec Firefox et IE, cela fonctionne.
cela fonctionne meme avec un des boutons radio
Or ce que je souhaite c'est choisir a partir d'un menu deroulant, donc d'un <select>.
selon le village que je choisis dans la liste deroulante, il s'affiche une Div mentionnant quelle ecole choisir (sur laquelle il y aura un lien)

Mon probleme : le code si dessous marche parfaitement sour Firefox et impossible sous IE.
j'ai l'impression a force de chercher de passer a cote de quelque chose d'evident :
voici le code :

Code :

<style>
#village-A,#village-B {
position:absolute;
visibility:hidden;
}
</style>
<script type="text/javascript" language="javascript">
function sgAffiche(nObjet,nEtat) {
document.getElementById(nObjet).style.visibility = (nEtat==0?'hidden':'visible');
}
</script>
<script type="text/javascript" language="javascript">
var ns4=document.layers;
var ie4=document.all;
var ns6=document.getElementById&&!document.all;
function twAfficheCache(nObjet,nEtat) {
// Script gratuit des Trucsweb.com
if(ie4) { // Internet explorer
eval(nObjet).style.visibility = (nEtat==0?'hidden':'visible');
}
else if(ns4) { // Netscape 4.x
document.eval(nObjet).visibility = (nEtat==0?'hidden':'show');
}
else if(ns6) { // Netscape 6 (mozilla)
document.getElementById(nObjet).style.visibility = (nEtat==0?'hidden':'visible');
}
}
</script>
</head>
<body>
<div id="page">
<div id="header"><h1> </h1>
</div>
<br />
<div id="gauche" style="height:250px;">
<h4>Trouver votre ecole</h4>
<div style="margin-left:26px; margin-top:0px;padding-top:0px;float:left;">
<form name="formu_village" method="post" action="#">
<select name="choixVillage" id="choixVillage">
<option value="montpellier" onClick="twAfficheCache('village-A',1);twAfficheCache('village-B',0);">Jacou</option>
<option value="montpellier" onClick="twAfficheCache('village-A',1);twAfficheCache('village-B',0);">Clermont l'herault</option>
<option value="perpignan" onClick="twAfficheCache('village-A',0);twAfficheCache('village-B',1);">Leucate</option>
<option value="perpignan" onClick="twAfficheCache('village-A',0);twAfficheCache('village-B',1);">St Cyprien</option>
</select>
</form></div>
<p>
<div id="village-A">Votre ecole : Montpellier</div>
<div id="village-B">Votre ecole : Perpignan</a></div>
</p>

merci a ceux qui ont la solution
sand

Publicité

bul3

bonjour,

avec IE, point d'évênements sur les options !
seul vaut onchange sur la balise <select>

et là, this.selectedIndex c'est la n° de ligne,
this.options[this.selectedIndex].value ou .text c'est le .value ou le .text
de l'option sélectionnée.

fonctionne aussi avec les autres navigateurs.
attention d'ailleurs, si le select a un size=1 ou n'a pas
de size défini, la 1ère option est sélectionnée par défaut,
il faudra donc sélectionner une autre ligne avant de pouvoir
déclencher le onchange sur la ligne 0
c'est pour ça qu'on voit souvent une 1ère ligne bidon dans les select
on peut mettre size=2 au mins
on réinitiliser selectedIndex au focus ? ( onfocus:"this.selectedIndex=-1;" }
ou...
@+

Message édité par bul3 le 09-09-2008 à 16:05:42

---------------
[mon site] [m'écrire]

FORUM HardWare.fr

Programmation

HTML/CSS

montrer/cacher div a partir d'un <select><option>

Sujets relatifs
problème avec XSL pour générer HTML à partir de XML	Comment cacher 2 colonnes de ma table?
problème de AND et OR dans mon select	[Javascrpit] Afficher/Cacher un formulaire
Style CSS dans <option>	Retouver le form englobant sans partir d'un element
Comment récupérer des données de <select> <option>	Générer des PDF à partir d'une BD PHP
[Shell] - Création de comptes a partir d'un fichier txt
Plus de sujets relatifs à : montrer/cacher div a partir d'un <select><option>

Page générée en 0.053 secondes