JSFiddle - React, Tailwind, and code Playground

by phej

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<select id="firstPeriod">
<option disabled selected>Select One</option>
<optgroup label="Math">
<option>Grade 1</option>
<option>Grade 2</option>
</optgroup>
<optgroup label="Science">
<option>Grade 1</option>
<option>Grade 2</option>
</optgroup>
</select> 

<select id="secondPeriod">
<option disabled selected>Select One</option>
<optgroup label="Math">
<option>Grade 1</option>
<option>Grade 2</option>
</optgroup>
<optgroup label="Science">
<option>Grade 1</option>
<option>Grade 2</option>
</optgroup>
</select> 

<select id="thirdPeriod">
<option disabled selected>Select One</option>
<optgroup label="Math">
<option>Grade 1</option>
<option>Grade 2</option>
</optgroup>
<optgroup label="Science">
<option>Grade 1</option>
<option>Grade 2</option>
</optgroup>
</select>

CSS

optgroup[label="Math"] {background-color: #ccefff;}
optgroup[label="Science"] {background-color: #fff5dc;}
option {background-color: #fff;}

JavaScript

$('select').change(function() {
    var optgroup_label = $(this.options[this.selectedIndex]).closest('optgroup').prop('label');
    //console.log(optgroup_label);
    
    if(optgroup_label == 'Math'){ 
        $("select").css('background-color', '#ccefff');
    } 
    else if(optgroup_label == 'Science') {
        $("select").css('background-color', '#fff5dc');
    }
});