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

Marsh Posté le 09-09-2008 à 15:33:44

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

Reply

Marsh Posté le 09-09-2008 à 15:33:44

Reply

Marsh Posté le 09-09-2008 à 16:00:37

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]

Reply

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

Sujets relatifs:

Leave a Replay