JSFiddle - React, Tailwind, and code Playground

HTML

<select name="options" id="options">
    <option value="" selected="selected">select an option</option>
    <option value="first">first option</option>
    <option value="second">second option</option>
    <option value="third">third option</option>
</select>
<select style="display:none" name="colors" id="colors"></select>
<div id="image"></div>

JavaScript

(function() {
    var selectedOption = '',        
        options = {
            first: {
                colors: {
                    red: '/src/to/red.jpg',
                    green: '/src/to/green.jpg'
                }
            },
            second: {
                colors: {
                    blue: '/src/to/blue.jpg',
                    yellow: '/src/to/yellow.jpg'
                }
            },
            third: {
                colors: {
                    white: '/src/to/white.jpg',
                    black: '/src/to/black.jpg'
                }
            }
        };
    
    $('#options').bind('change', function() {
        var val = $(this).val();
        if(!val) {
            $('#colors').hide();
            $('#image').hide();
            return;
        }
        selectedOption = val;
        var html = "<option value=''>Select color</option>";
        $.each(options[val].colors, function(k, v) {
            html += "<option value='" + k + "'>" + k + "</option>"
        });
        $('#colors').html(html).show();
    });
    
    $('#colors').bind('change', function() {
        var val = $(this).val();
        if(!val) {
            $('#image').hide();
            return;
        }
        $('#image').html('showing image ' + options[selectedOption].colors[$(this).val()]);
    });
})();