從下拉菜單中選擇圖像后如何顯示圖像？

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>