根据另一个下拉列表的值更新一个下拉列表的值

Question

我有两个下拉菜单，都是从目录中删除的。第一个下拉选择路径，即刮取第一个文件夹。第二个下拉列表确定要从该文件夹显示的图像。但是，当第一个下拉列表更改时，我无法获得第二个下拉列表的值以进行更新。这意味着下拉列表为空。

代码：

<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或预定义值，我已经阅读了许多其他问题并且无法实现它们，因此只需过滤select by id就不起作用。