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

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<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) {
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>&nbsp;</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