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

sdalmas · 9 Septembre 2008

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

crocxx · 9 Septembre 2008

Bonjour,

A tu essayer de remplacer tes onClick sur tes option par un onChange sur ton select?

Modifié 9 Septembre 2008 par crocxx

Connexion

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

Sujets conseillés

sdalmas

crocxx

Veuillez vous connecter pour commenter

Parcourir

Activité