JSFiddle - React, Tailwind, and code Playground

HTML

<select name="region">
    <option value="%">All</option>
    <option value="A">Northwest</option>
    <option value="B">North Central</option>
</select>

<select name="campus">
    <option value="%">All</option>
    <optgroup label="Northwest">
        <option value="1">Gary</option>
        <option value="2">Valparaiso</option>
        <option value="3">East Chicago</option>
    </optgroup>
    <optgroup label="North Central">
        <option value="4">South Bend</option>
        <option value="5">Elkhart</option>
        <option value="6">Warsaw</option>
    </optgroup>
</select>

JavaScript

$('select[name="region"]').change(function() {
    var $sel = $('select[name="campus"]'),
        val = $(this).val(),
        campus = $('option:selected', this).text();
    $('span > optgroup', $sel).unwrap();
    if (val !== '%') {
        $('optgroup:not([label="' + campus + '"])', $sel).wrap('<span/>');
    }
});