Отображение определенного графического элемента

Question

В настоящее время у меня есть фрагмент JavaScript, который берет значение и выделенный текст из динамического выпадающего меню php и передает его в поле ввода для редактирования.

Вопросы:

Как я могу передать элемент php через javascript, чтобы показать конкретное изображение для выбранного значения при его выделении?

Как сделать так, чтобы выделенный текст выводился в поле ввода при выборе?

 $('#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>