JSFiddle - React, Tailwind, and code Playground

by devingoble

HTML

All items
<select id="thisOne">
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
    <option>Four</option>
    <option>Five</option>
</select>
<br />
<br />
based on class
<select id="thisOtherOne">
    <option>One</option>
    <option class="green">Two</option>
    <option>Three</option>
    <option class="red">Four</option>
    <option>Five</option>
</select>
<br />
<br />
based on value
<select id="yetAnother">
    <option>One</option>
    <option value="Two">Two</option>
    <option>Three</option>
    <option>Four</option>
    <option>Five</option>
</select>
<br />
<br />
Bold
<select id="withBold">
    <option>One</option>
    <option value="Two">Two</option>
    <option>Three</option>
    <option value="bold">Four</option>
    <option>Five</option>
</select>

CSS

#thisOne {
    Color:blue;
}

.green {
    Color:green;
}

.red {
    Color:red;
}

.bold {
    font-weight:bold;
}

JavaScript

$("#yetAnother option[value='Two']").addClass("green");
$("#withBold option[value='bold']").addClass("bold");