probleme de valeur pour style.display (affichage d'une deuxieme liste en fonction du onchange de la première)

salut,
j'ai un pb avec le script ci-dessous, et j'arrive pas à comprendre pkoi ?
effect desiré : normalement si on choisi dans la liste id_metier, la liste metier1 ou metier2 doit s'afficher en fonction, non ???
merci de m'aider...

<script>
function showhide(vari)
{ if (vari.style.display=='none') { vari.style.display=''; }
else { vari.style.display='none'; }}
</script>

<form name="form" action="?page=fiche" method="post">
<select name="id_metier" onchange="showhide(this.value)">
<option>choisissez un metier</option>
<option value="1">metier1</option>
<option value="1">metier2</option>
</select>

<div id="1" style="display:none">
<select name="metier1">
<option>choisissez une catégorie</option>
<option value="1">option11</option>
<option value="1">option12</option>
<option value="1">option13</option>
</select>
</div>

<div id="2" style="display:none">
<select name="metier2">
<option>choisissez une catégorie</option>
<option value="1">option21</option>
<option value="1">option22</option>
</select>
</div>