'Showing a specific graphic onchange

I currently have a piece of JavaScript that takes the value and the selected text from the PHP dynamic dropdown menu and passes it through to a input box for editing.

Questions:

How could I pass a PHP item through the JavaScript to show the specific image for the selected value when it is selected?

How could I make the selected text echo into the input box on select?

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


Solution 1:[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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions