Обновление значения одного раскрывающегося списка на основе значения другого раскрывающегося списка

У меня есть два раскрывающихся списка, оба взяты из каталогов. Первый раскрывающийся список выбирает путь, т. е. очищает первую папку. Второй раскрывающийся список определяет изображение для отображения из этой папки. Однако я не могу получить значение второго раскрывающегося списка для обновления при изменении первого раскрывающегося списка. Это означает, что раскрывающийся список пуст.

Код:

<select name="Image1">
    <option value="" selected="selected"></option>
  <?php 
    $dir1 = "../img/";
    $dh1  = opendir($dir1);
    while (false !== ($filename1 = readdir($dh1))) {
        if ($filename1 === '.' or $filename1 === '..' or $filename1 === '.htaccess' or $filename1 === 'theme' )
            continue;
     else
            $files1[] = $filename1;
  echo "<option value='".$dir1 ."/". $filename1 . "'>" . $filename1 . "</option>";  }
    sort($files1);
 ?>

</select>
<select name="Image2" onChange="showImage(this.value)">
    <option value="" selected="selected"></option>
  <?php 
    $dirname = $_POST['Image1'];
    $dir = "../img/" . $dirname . "/";
    $dh  = opendir($dir);
    while (false !== ($filename = readdir($dh))) {
        if (strpos($filename, '.JPG')!== false) 
            $files[] = $filename;
     else
            continue;
  echo "<option value='".$dir ."/". $filename . "'>" . $filename . "</option>";  }
    sort($files);
 ?>

</select>  

<div id="image_div"></div> 

<script type="text/javascript">
 function showImage(value)
 {
  var img = "<img src='"+value+"' style=width:55em; height:55em; />";
  document.getElementById('image_div').innerHTML = img;
 }
</script>

Редактировать: я прочитал много других вопросов и не смог их реализовать из-за наличия либо SQL, либо предопределенных значений, поэтому простая фильтрация выбора по идентификатору не сработает.