JSFiddle - React, Tailwind, and code Playground

by sparkhill

HTML

<select id="firstSelect">
   <option value="0" selected="selected">Choose...</option>
   <option value="value1">Value1</option>
   <option value="value2">Value2</option>
   <option value="value3">Value3</option>
   <option label="UNITED ARAB EMIRATES" value="UNITED ARAB EMIRATES">UNITED ARAB EMIRATES</option>
<option label="UNITED KINGDOM" value="UNITED KINGDOM">UNITED KINGDOM</option>
    
</select>

<select id="secondSelect">
   <option value="0" selected="selected">Choose...</option>
    <option class="conditional UNITED KINGDOM"  value="UNITED KINGDOM_Aberdeenshire">Aberdeenshire</option>
    <option class="conditional UNITED ARAB EMIRATES" value="UNITED ARAB EMIRATES_Anglesey">Anglesey</option>
   <option class="conditional value1" value="subValue1">Value1: Sub1</option>
   <option class="conditional value2" value="subValue2">Value2: Sub1</option>
   <option class="conditional value2" value="subValue3">Value2: Sub2</option>
   <option class="conditional value2" value="subValue4">Value2: Sub3</option>
   <option class="conditional value2" value="subValue5">Value2: Sub4</option>
   <option class="conditional value2" value="subValue6">Value2: Sub5</option>
   <option class="conditional value3" value="subValue7">Value3: Sub1</option>
   <option class="conditional value3" value="subValue8">Value3: Sub2</option>
   <option class="conditional value3" value="subValue9">Value3: Sub3</option>
    
    
</select>

JavaScript

$(function(){
    var conditionalSelect = $("#secondSelect"),
        // Save possible options
        options = conditionalSelect.children().clone();
    
    $("#firstSelect").change(function(){
        var value = $(this).val().replace(/ /g, '.');  
        console.log(options);
        conditionalSelect.children().remove();
        options.clone().filter("."+value).appendTo(conditionalSelect);
    }).trigger("change");
});