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

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

可能是你應該嘗試這個.. 這可以幫助你..

<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> 

Answer 2

試試這個

<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 ?>"/>