JSFiddle - React, Tailwind, and code Playground

by moeishaa

HTML

<select name="options" id="options">
    <option value="" selected="selected">Select Your Wood Species</option>
    <option value="oak">oak</option>
    <option value="maple">maple</option>
</select>
<br />
<select style="display:none" name="colors" id="colors"></select>
<div id="image"></div>

JavaScript

(function() {
    var selectedOption = '',        
        options = {
            oak: {
                colors: {
                    oilandwax: '<img src="imgs/oak/oilwaxoak.jpg" />',
                    natural: '<img src="imgs/oak/naturaloak.jpg" />',
                    whitepaint: '<img src="imgs/oak/whitepaintoak.jpg" />',
                    whitewash: '<img src="imgs/oak/whitewashoak.jpg" />',
                    honey: '<img src="imgs/oak/honeyoak.jpg" />',
                    cinnamon: '<img src="imgs/oak/cinnamonoak.jpg" />',
                    medium: '<img src="imgs/oak/mediumoak.jpg" />',
                    rustic: '<img src="imgs/oak/rusticoak.jpg" />',
                    autumn: '<img src="imgs/oak/autumnoak.jpg" />',
                    lexington: '<img src="imgs/oak/lexingtonoak.jpg" />',
                    mahogany: '<img src="imgs/oak/mahoganyoak.jpg" />',
                    burnt: '<img src="imgs/oak/burntoak.jpg" />',
                    blackened: '<img src="imgs/oak/blackenedoak.jpg" />',
                    midnight: '<img src="imgs/oak/midnightoak.jpg" />'
                }
            },
            maple: {
                colors: {
                    oilandwax: '<img src="imgs/maple/oilwaxmaple.jpg" />',
                    natural: '<img src="imgs/maple/naturalmaple.jpg" />',
                    colonial: '<img src="imgs/maple/colonialmaple.jpg" />',
                    iconic: '<img src="imgs/maple/iconicmaple.jpg" />',
                    espresso: '<img src="imgs/maple/espressomaple.jpg" />',
                    royal: '<img src="imgs/maple/royalmaple.jpg" />',
                    onyx: '<img src="imgs/maple/onyxmaple.jpg" />'
                }
            },
            
        };
    
    $('#options').bind('change', function() {
        var val = $(this).val();
        if(!val) {
            $('#colors').hide();
            $('#image').hide();
            return;
        }
        selectedOption = val;
        var html...