JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/ui-lightness/jquery-ui.css">
<select name='input_34' id='input_1_34' class='small gfield_select' tabindex='1' >
<option value='29' >Alabama</option>
<option value='34' >Alaska</option>
<option value='43' >Arizona</option>
</select>
<select name='input_13' id='input_13' class='small gfield_select' tabindex="2">
<option value='-1' selected='selected'>Select a base</option>
<optgroup class="level-0" label = "Alabama" value='29'>
<option class="level-1" value="30">Anniston Army Depot</option>
<option class="level-1" value="333">Fort Rucker</option>
<option class="level-1" value="32">Maxwell-Gunter AFB</option>
<option class="level-1" value="33">Redstone Arsenal</option>
</optgroup>
<optgroup class="level-0" value="34" label="Alaska">
<option class="level-1" value="35">Eielson AFB</option>
<option class="level-1" value="36">Elmendorf AFB</option>
<option class="level-1" value="37">Fort Greely</option>
<option class="level-1" value="38">Fort Richardson</option>
<option class="level-1" value="39">Fort Wainwright</option>
<option class="level-1" value="40">USCG ISC Kodiak</option>
<option class="level-1" value="41">USCG Juneau</option>
<option class="level-1" value="42">USCG Ketchikan</option>
</optgroup>
<optgroup class="level-0" value="43" label="Arizona">
<option class="level-1" value="44">USCG whatever</option>
<option class="level-1" value="45">USCG whatever</option>
</optgroup>
</select>
JavaScript
jQuery(document).ready(function() {
var clone_select = $('#input_13').clone();
jQuery('#input_1_34').bind('change', function() {
var selectedValue = jQuery("#input_1_34").val();
var clone_subset = clone_select
.find('optgroup[value="' + selectedValue + '"] > option')
.clone();
$('#input_13').empty().append(clone_subset);
});
});