JSFiddle - React, Tailwind, and code Playground

by Terry Mun

HTML

<select name="image" id="image" class="inputbox" size="1">
   <option value="imageall.jpg" selected> - All - </option>
   <option value="image1.jpg">image1.jpg</option>
   <option value="image2.jpg">image2.jpg</option>
   <option value="image3.jpg">image3.jpg</option>
</select>

<div id="imagePreview">
   displays image here
</div>

JavaScript

$(document).ready(function() {
    var imgPrev = function(imgSrc) {
        $('#imagePreview')
        .empty()
        .append($('<img />', {
            src: imgSrc,
            alt: ''
        }));
    };
    
    // Update image preview when <select> is updated
    $('#image').change(function() {
        imgPrev($(this).val());
    });
    
    // Update image preview on load
    imgPrev($('#image').find('option[selected]').val());
});