Aller au contenu

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


sdalmas

Sujets conseillés

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 :

<style>
#village-A,#village-B {
position:absolute;
visibility:hidden;
}
</style>

<!-- fonction essayee initialement puis abandonnée pour celle qui suit mais memes resultats dans IE : ne fonctionne pas ! -->
<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

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...