JSFiddle - React, Tailwind, and code Playground

by Russell McCabe

HTML

<select name="usercountry" id="usercountry" class="required">
        <option value="">-- Please Choose --</option>
        <option value="Australia">Australia</option>
        <option value="Canada">Canada</option>
        <option value="United Sates" selected>United Sates</option>
        <option value="Zimbabwe">Zimbabwe</option>
</select>
<select name="userstate" id="userstate" class="required">
             <option value="" selected>Please Choose..</option>
       <optgroup label="Australia">
             <option value="New South Wales">New South Wales</option>
             <option value="Northern Territory">Northern Territory</option>
             <option value="Queensland">Queensland</option>
       </optgroup>
       <optgroup label="Canada">
             <option value="Alberta">Alberta</option>
             <option value="British Columbia">British Columbia</option>
             <option value="Manitoba">Manitoba</option>
             <option value="New Brunswick">New Brunswick</option>
       </optgroup>
       <optgroup label="United States">
             <option value="Alabama">Alabama</option>
             <option value="Alaska">Alaska</option>
             <option value="Arizona">Arizona</option>
             <option value="Arkansas">Arkansas</option>
             <option value="California">California</option>
             <option value="Colorado">Colorado</option>
             <option value="Connecticut">Connecticut</option>
       </optgroup>
       <optgroup label="Zimbabwe">
             <option value="Bulawayo">Bulawayo</option>
             <option value="Harare">Harare</option>
             <option value="Manicaland">Manicaland</option>
             <option value="Midlands">Midlands</option>
       </optgroup>
</select>

JavaScript

// sets the option group using the same code you already use for on-country-change
function setOptGroup() {
    var state_province = $('#userstate option, #userstate optgroup');
    state_province.hide();
    $("#userstate optgroup[label='" + $(this).find(':selected').html() + "']")
        .children()
        .andSelf()
        .show();
}

$( document ).ready(function() {
    // set up the USA option group when the page is loaded
    setOptGroup();

    // your present code - refactored a bit
    $('#usercountry').change(setOptGroup);
});