Problème de multiplication de listes déroulantes liées avec ajax

Bonjour à tous,

Voilà mon problème, j'ai une liste déroulante avec la catégorie de l'image, après le choix de la catégorie une liste d'image de la catégorie apparait et après le choix d'une image un aperçu de l'image selectionnée. Cela marche parfaitement. Seulement quand je veux multiplier ces mêmes listes cela ne fonction pas. j'espère que vous pourriez m'apporter de l'aide

Merci d'avance.

le lien: http://www.evmag.fr/maj/test3.php

sinon le code donne ceci:

<script type="text/javascript">
if (window.XMLHttpRequest) {
   oXmlhttp = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
   oXmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }

function search (clef) {
 oXmlhttp.open('POST','<?php echo $_SERVER['PHP_SELF']; ?>');
 oXmlhttp.onreadystatechange=function() {
  if (oXmlhttp.readyState==4 && oXmlhttp.status == 200) {
   document.body.innerHTML = oXmlhttp.responseText;
  
  }
 }
 oXmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 var data = 'liste1='+clef;
 oXmlhttp.send (data);
}

function apercu(cat){

var sel = document.getElementById('image');
var image = sel.options[sel.selectedIndex].value;

document.getElementById('apercu_image').setAttribute("src", cat+image);

}

</script>

<?php
require("../log/racines.php");
require($GLOBALS['HTTP_SESSION_VARS']['_racine_serveur']."log/constantes.php"); // mysql_connexion()

include("../log/gestion_images/php_dir.php");

?>
<br><br>
<form method="post">
<?
if (isset($_POST['liste1'])){

  switch ($_POST['liste1']){
 
  case 'Accueil' :
  $repertoire="../".$liste_images['image accueil']['rep'];
  break;
 
  case 'Audio' :
  $repertoire="../".$liste_images['image audio']['rep'];
  break;
 
  case 'Photo' :
  $repertoire="../".$liste_images['image photo']['rep'];
  break;
 
  case 'Video' :
  $repertoire="../".$liste_images['image video']['rep'];
  break;
 
  case 'CD' :
  $repertoire="../".$liste_images['image cd']['rep'];
  break;
 
  case 'Ecoutez' :
  $repertoire="../".$liste_images['image ecoutez']['rep'];
  break;
 
  case 'News' :
  $repertoire="../".$liste_images['image news']['rep'];
  break;
 
  case 'Voir' :
  $repertoire="../".$liste_images['image voir']['rep'];
  break;
 
  }
}
$tab_files = array() ;
if ($dir = @opendir($repertoire))
{
    while($file = readdir($dir))
    {
        if ($file != "." && $file != "..")
        {
            $tab_files[]=$file;
        } 
    }
    closedir($dir);
}

$aTab = array (
'...' => array ('...'),
'Accueil' => $tab_files,
'Audio' => $tab_files,
'Photo' => $tab_files,
'Video' => $tab_files,
'CD' => $tab_files,
'Ecoutez' => $tab_files,
'News' => $tab_files,
'Voir' => $tab_files);
?>
<select id="categorie" name="liste1" onchange="search (this.value);">
<?php
foreach ($aTab as $clef => $dump) {
 $selected=(isset($_POST['liste1']) && $_POST['liste1'] == $clef)?'selected="selected"':'';
 echo '<option value="'.$clef.'" '.$selected.'>'.$clef.'</option>';
}
?>

</select>

<?php
if (isset ($_POST['liste1']) && !empty ($_POST['liste1'])) {
 echo '<select name="liste2" id ="image" onChange="apercu(\''.$repertoire.'\')">';
 foreach ($aTab[$_POST['liste1']] as $val) {
  echo '<option value="'.$val.'">'.$val.'</option>';
 }
 echo '</select>';
 ?>
<br>
<img id="apercu_image" style="min-width:100px;  max-width:100px; "/>
 
 <?
}
?>
</form>