Menu select avec l'affichage d'un div

Bonjour,

je souhaiterai via un menu select de ce type:
<select name=service onchange="affiche(this);" onfocus="this.selectedIndex=-1);">

<optgroup label="-Tous les services-">
<option value="Site web">Site web </option>

<option value="CD interactif">CD interactif</option>
<optgroup label="------------">
<option value="Print">Print</option>
<option value="Carte visite">Carte de visite</option>
<option value="invitation de mariage">Invitation de mariage</option>

<optgroup label="------------">
<option value="Affichage" >Affichage</option>
<option value="vitrine">Vitrine</option>
<option value=" Habillage de véhicules"> Habillage véhicules </option>
</optgroup>
</select>

afficher ou masquer des <div> suivant l'option choisie:

j'utilise ce javascript qui permet d'afficher le div via son id et de masquer les autres.
<div id="d1" style="position:absolute; overflow:hidden; left:290px; top:190px; width:550px; height:383px; z-index:4"> <font color="#FFFFFF"> Le Web permet ...</div>
<div id="d2" style="position:absolute; overflow:hidden; left:290px; top:185px; width:600px; height:383px; z-index:4"> <font color="#FFFFFF"> Le CD interactif ...</div>
<div id="d3" style="position:absolute; overflow:hidden; left:290px; top:185px; width:600px; height:383px; z-index:4"> <font color="#FFFFFF">Nous occupons ...</div>
<script type="text/javascript">
function affiche(sel)
{
var n=1;
while ( document.getElementById("d"+n) )
{
document.getElementById("d"+n).style.visibility="hidden" ;
n++;
}
document.getElementById("d"+(sel.selectedIndex+1)).style.visibility="visible";
}
</script>
mon problém ce que tous les div sont visibles au debut
merci