JSFiddle - React, Tailwind, and code Playground

HTML

<select id="country-select">
    <option value="us">US</option>
    <option value="germany">Germany</option>
    <option value="50">Ireland</option>
    <option>Benin</option>
    <option>Italy</option>
</select>
<div class="countryvalue">Value</div>

CSS

.hide {
    display: none;
}

JavaScript

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

$(document).ready(function () {

    $('#country-select').change(countrySelectChanged);
    countrySelectChanged();

    $("#country-select").change(function () {
        var $country = $("#country-select"),
            country_val = $country.find("option:selected").val(),
            $city = $("#" + country_val + "-select"),
            hasCity = $city.length !== 0;

        var str = $country.val() + " " + (hasCity ? $("#" + country_val + "-select option:selected").val() : $country.val());
        $country.find("option:selected").each(function () {});
        $(".countryvalue").val(str);
    })
        .change();
});