JSFiddle - React, Tailwind, and code Playground

by jtbowden

HTML

enter code here
<select id="colorSlct" type="select" class="select2" style="margin-left: 0;">
    <option id="WHITE"></option>
    <option id="GRAY" selected="selected">Gray</option>
    <option id="PINK">Pink</option>
    <option id="YELLOW">Yellow</option>
    <option id="ORANGE">Orange</option>
</select>

CSS

#WHITE, .WHITE {
    background-color: white;
}
#GRAY, .GRAY {
    background-color: rgb(194, 194, 194);
}
#PINK, .PINK {
    background-color: rgb(255, 153, 203);
}
#YELLOW, .YELLOW {
    background-color: rgb(254, 255, 153);
}
#ORANGE, .ORANGE {
    background-color: rgb(255, 204, 154);
}

JavaScript

function changeSel() {
    var selected = $("option:selected", "#colorSlct");
    $("#colorSlct").removeClass().addClass(selected.attr("id"));
}

changeSel()

$(document).on('change', '#colorSlct', changeSel);