JSFiddle - React, Tailwind, and code Playground

by Daniel Lamb

HTML

<select></select>
<br/>selected color:
<div id="selected"></div>

CSS

#selected {
    width: 100px;
    height: 100px;
    border: 1px #000 solid;
}

JavaScript

var colors = [
    {name:'black', shade:'dark'},
    {name:'white', shade:'light'},
    {name:'red', shade:'dark'},
    {name:'blue', shade:'dark'},
    {name:'yellow', shade:'light'}
];

// build the list
$.each(colors, function (i, color) {
    $('select').append(
        $('<option />', {
            text : color.name,
            value: i
        })
    );
});

// listen for changes
$('select').on('change', function (e) {
    // get the selected index
    var index = $(this).prop("selectedIndex"),
        // look up the color
        color = colors[index].name
    // update the UI with the selected color
    $('#selected').css('background', color);
})
.val(2) // default to red
.trigger('change'); // trigger change to init the UI