JSFiddle - React, Tailwind, and code Playground
HTML
<form action="#" class="cascadeTest">
<table>
<tr>
<th>Organization:</th>
<td>
<select name="orgSelect" class="orgSelect">
<option value="some_value" data-id="0">Select an Organization</option>
<option value="some_value" data-id="1">Organization 1</option>
<option value="some_value" data-id="2">Organization 2</option>
<option value="some_value" data-id="3">Organization 3</option>
</select>
</td>
</tr>
<tr>
<th>Territory:</th>
<td>
<select name="terrSelect" class="terrSelect" disabled="disabled">
<option value="some_value" class="static" data-id="0">- All Territories -</option>
<option value="some_value" class="sub_1" data-id="1">Organization 1 - Territory 1</option>
<option value="some_value" class="sub_1" data-id="2">Organization 1 - Territory 2</option>
<option value="some_value" class="sub_2" data-id="3">Organization 2 - Territory 1</option>
<option value="some_value" class="sub_2" data-id="4">Organization 2 - Territory 2</option>
<option value="some_value" class="sub_3" data-id="5">Organization 3 - Territory 1</option>
<option value="some_value" class="sub_3" data-id="6">Organization 3 - Territory 2</option>
<option value="some_value" class="sub_3" data-id="7">Organization 3 - Territory 3</option>
</select>
</td>
</tr>
<tr>
<th>Location:</th>
<td>
<select name="locSelect" class="locSelect" disabled="disabled">
<option value="some_value" class="static" data-id="0">- All Locations -</option>
<option value="some_value" class="sub_1" data-id="1">Organization 1 - Territory 1 - Location 1</option>
<option value="some_value" class="sub_1" data-id="1">Organization 1 - Territory 1 - Location 2</option>
<option value="some_value" class="sub_2" data-id="2">Organization 1 - Territory 2 - Location...
JavaScript
$('.orgSelect').change(function(){
selected = $('option:selected', this).attr('data-id');
$('.terrSelect').removeAttr('disabled');
$('.terrSelect').children('option').each(function(){
if( !$(this).hasClass( 'sub_'+selected ) ){
$(this).attr('disabled','disabled');
}
else {
$(this).removeAttr('disabled');
}
});
});
$('.terrSelect').change(function(){
selected = $('option:selected', this).attr('data-id');
$('.locSelect').removeAttr('disabled');
$('.locSelect').children('option').each(function(){
if( !$(this).hasClass( 'sub_'+selected ) ){
$(this).attr('disabled','disabled');
}
else {
$(this).removeAttr('disabled');
}
});
});