JSFiddle - React, Tailwind, and code Playground

by rami7250

HTML

<label for="select-country">Select country</label>
<select name="country" id="select-country">
    <option>Select country</option>
    <option value="USA">USA</option>
    <option value="Canada">Canada</option>
</select>

<div class="hidden toggle-option" id="select-region-usa">
    <label for="select-region-usa-input">Select region</label>
    <select name="country" id="select-region-usa-input">
        <option value="Texas">Texas</option>
        <option value="Utah">Utah</option>
    </select>
</div>

<div class="hidden toggle-option" id="select-region-can">
    <label for="select-region-can-input">Select region</label>
    <select name="country" id="select-region-can-input">
        <option value="Ontario">Ontario</option>
        <option value="Quebec">Quebec</option>
    </select>
</div>

CSS

.hidden {
    display: none;
}

JavaScript

$(document).ready(function() {
    var $select = $("#select-country");

    $select.change(function() {
        // Switch use value of the #select-country
        switch ( $select.val() ) {
            case 'USA':
                $('.toggle-option:not(#select-region-usa)').addClass('hidden');
                $('#select-region-usa').removeClass('hidden');
            break;
            case 'Canada':
                $('.toggle-option:not(#select-region-can)').addClass('hidden');
                $('#select-region-can').removeClass('hidden');
            break;
        }
    });

});