OnChange php css javascript IE

Bonjour,

Alors voila j'ai une table 'type' et une table 'sous-type' dans une bdd mysql.
Dans un formulaire, je crée un menu déroulant avec la liste des 'types' rencontrés dans la colonne 'type' de ma table 'types'.
Je voudrais qu'apres séléction d'un 'type' dans ce menu déroulant, un second menu s'affiche avec la liste des sous-types correspondant au 'type' choisi.
Voici des photos de mes tables pour que vous compreniez: http://mexos.free.Fr/d

J'ai créé une fonction qui génère le premier menu déroulant ainsi que les sous-menus que je met en visibility:hidden pour commencer.
Puis à l'aide d'un onChange, je voudrai faire apparaitre le bon sous-menu.

Le code suivant fonctionne, mais quand je séléctionne un autre 'type' dans le premier menu, son sous-menu correspondant reste affiché au lieu de disparaître et je ne sais pas comment faire.

<script language='javascript'>
function DisplaySoustype(type){
if (type!="")
document.getElementById(type).style.visibility= 'visible';
else
document.getElementById(type).style.visibility= 'hidden';
}
</script>
<?php
function selectForm2($colonne, $table){
$sql = "SELECT DISTINCT $colonne FROM $table";
$reponse = mysql_query($sql) or die(mysql_error());
while ($ligne = mysql_fetch_array($reponse)) {
$colonnes[] = $ligne[0]; }
$nb = count($colonnes);

echo '<select name="type" onChange="DisplaySoustype(this.value)">';
echo '<option></option>';
for ($i=0; $i<=$nb; $i++){
if ($colonnes[$i] != ''){
$type[]=$colonnes[$i];
echo '<option>';
echo $colonnes[$i];
echo '</option>';
}
}
echo '<option id="autre">Autre</option>';
echo '</select><br />';

echo 'Sous-Type de produit:';
for ($j=0; $j<=$nb; $j++){
$z = $j-1;
echo '<select name="sous_type" id="'.$type[$z].'" style="visibility:hidden">';
echo '<option></option>';
selectSoustype("$j");
echo '</select>';
}
}
?>

Si vous avez une idée pour régler ce probleme, ou pour aborder la situation totalement différement même, je suis preneur.

D'avance merci :).