JSFiddle - React, Tailwind, and code Playground

by j08691

HTML

<select id="country-select">
    <option value="UK">UK</option>
    <option value="US">US</option>
</select>
<select id="UK-select" class="sub-menu hide">
    <option value="England">England</option>
</select>
<select id="US-select" class="sub-menu hide">
    <option value="California">California</option>
    <option value="Texas">Texas</option>
</select>
<p></p>
<div class="contentcountry">Value</div>

CSS

.hide {
    display: none;
}

JavaScript

function countrySelectChanged() {
    $('.sub-menu').hide();
    var selectedCountry = $('#country-select').val();
    if (selectedCountry) {
        $('#' + selectedCountry + '-select').show();
    }
}

$(document).ready(function () {
    $('#country-select').change(countrySelectChanged);
    countrySelectChanged();
    $("#country-select, .sub-menu").change(function () {
        var str = $('#country-select').val() + " " + $("#" + $("#country-select option:selected").val() + "-select option:selected").val();
        $("#country-select option:selected").each(function () {});
        $(".contentcountry").text(str);
    }).change();
});