JSFiddle - React, Tailwind, and code Playground
HTML
<select id="select1">
<option class="sf-level-0 sf-item-0" selected="selected" data-sf-depth="0" value="">All Items</option>
<option class="sf-level-0 sf-option-active" data-sf-count="-1" data-sf-depth="0" value="2 A">2 A</option>
<option class="sf-level-0" data-sf-count="-1" data-sf-depth="0" value="4 B">4 B</option>
</select>
<select id="select2">
<option class="sf-level-0 sf-item-0 sf-option-active" selected="selected" data-sf-depth="0" value="">All Items</option>
<option class="sf-level-0 " data-sf-count="-1" data-sf-depth="0" value="25 A">25 A</option>
<option class="sf-level-0 " data-sf-count="-1" data-sf-depth="0" value="40 A">40 A</option>
<option class="sf-level-0 " data-sf-count="-1" data-sf-depth="0" value="63 A">63 A</option>
<option class="sf-level-0 " data-sf-count="-1" data-sf-depth="0" value="80 A">80 A</option>
<option class="sf-level-0 " data-sf-count="-1" data-sf-depth="0" value="100 A">100 A</option>
</select>
JavaScript
var allOptions = ["25 A", "40 A", "63 A", "80 A", "100A"];
var twoAOptions = ["63 A", "80 A", "100A"];
var fourBOptions = ["25 A", "40 A"];
$("#select1").on("change", function() {
if($(this).val() === "2 A") {
$("#select2").find("option").remove().end().append('<option class="sf-level-0 sf-item-0 sf-option-active" selected="selected" data-sf-depth="0" value="">All Items</option>');
for(i=0; i <= twoAOptions.length -1; i++){
var option = '<option class="sf-level-0 " data-sf-count="-1" data-sf-depth="0" value="'+twoAOptions[i]+'">'+twoAOptions[i]+'</option>';
$('#select2').append(option);
}
} else if($(this).val() === "4 B") {
$("#select2").find("option").remove().end().append('<option class="sf-level-0 sf-item-0 sf-option-active" selected="selected" data-sf-depth="0" value="">All Items</option>');
for(i=0; i <= fourBOptions.length -1; i++){
var option = '<option class="sf-level-0 " data-sf-count="-1" data-sf-depth="0" value="'+fourBOptions[i]+'">'+fourBOptions[i]+'</option>';
$('#select2').append(option);
}
} })