从下拉菜单中选择图像后如何显示图像？

Question

我有以下代码从下拉菜单中选择图像。

<select name="Image2">
    <option value="" selected="selected"></option>
  <?php 
     $dir = "../files/images/product";//your path
    $dh  = opendir($dir);
    while (false !== ($filename = readdir($dh))) {
        $files[] = $filename;
  echo "<option value='" . $filename . "'>".$filename."</option>";  }
    sort($files);
 ?>

</select>   

有什么办法可以预览选定的图像？ 我这样尝试过：

<img src="<?php echo $filepath.$filename ?>" />

但是它什么也没显示

Answer 1

尝试这个

  <script>
       $('#attribute119').change(function () {
    var path=$('#filepath').val();
      $('#main').attr('src', path+'/'+ $('#attribute119 :selected').text() );
    });
    </script>

<img src="mainimage.jpg" id="main">
<select name="Image2" id="attribute119">
    <option value="" selected="selected"></option>
  <?php 
     $dir = "../files/images/product";//your path
    $dh  = opendir($dir);
    while (false !== ($filename = readdir($dh))) {
        $files[] = $filename;
  echo "<option value='" . $filename . "'>".$filename."</option>";  }
    sort($files);
 ?>

</select> 
<input type=hidden id="filepath" value="<?php echo $filepath ?>"/>

Answer 2

也许你应该试试这个..这可以帮助你..

<select name="Image2" onChange="showImage(this.value)">
    <option value="" selected="selected"></option>
  <?php 
     $dir = "../files/images/product";//your path
    $dh  = opendir($dir);
    while (false !== ($filename = readdir($dh))) {
        $files[] = $filename;
  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+"' />";
  document.getElementById('image_div').innerHTML = img;
 }
</script>