顯示一個特定的圖形onchange

Question

我目前有一段JavaScript，從php動態下拉菜單中取得值和選定的文本，並將其傳遞到輸入框進行編輯。

問題：

我怎麼可能通過JavaScript來顯示所選值的特定圖像通過一個PHP項目被選中的時候嗎？

如何將選定的文本回復到選擇的輸入框中？

$('#captionSelect').change(function(){ 
        $('#captionInput').val($("#captionSelect option:selected").html()).show(); 
       }); 

<select name="captionSelect" id="captionSelect"> 
    <?php foreach ($get_images as $image){ 
     echo '<option value="'.$image['id'].'">'.$image['description'].'</option>'; 
    }; 
    ?> 

</select> 

Answer 1

<select name="captionSelect" id="captionSelect"> 
    <?php 
     foreach ($get_images as $image){ 
      echo '<option title="'.$image['thumbname'].'" value="'.$image['id'].'" id="captionOption_'.$image['id'].'">'.$image['description'].'</option>'; 
     }; 
    ?> 
</select> 
<input id="captionInput" type="text" /> 
<img id="preview" /> 

<script type="text/javascript"> 
    $('#captionSelect').change(function(){ 
     var id = $(this).val(); 
     var caption = $('#captionOption_' + id).html(); 
     var thumbname = $('#captionOption_' + id).attr('title'); 
     $('#captionInput').val(caption); 
     $('#preview').attr('src', '/path/to/pictures/' + thumbname + '.jpg'); 
    }); 
</script>