JSFiddle - React, Tailwind, and code Playground

HTML

<select id='country'></select>
<select id='city'>
    <option value="0">-- Select one --</option>
</select>

JavaScript

// данные, присланные с сервера
var countries = [{'name': 'Russia', 'code': 1},{'name': 'Ukraine', 'code': 2}];
// в реальной ситуации города подтягиваются с сервера динамически, это ниже
var cities1 = [{'name': 'Moscow', 'code': 11}, {'name': 'Perm', 'code': 12}];
var cities2 = [{'name': 'Kiev', 'code': 21}, {'name': 'Lutsk', 'code': 22}];

var countrySelect = $('#country');
var citySelect = $('#city');

function renderOptions(data, renderTo){
    renderTo.empty(); // чистим select
    renderTo.append('<option value="0">-- Select one--</option>'); // добавляем заглушку
    if(data) { // если данные пришли - напрлняем select городами
        $.each(data, function(){
            renderTo.append('<option value="' + this.code + '">' + this.name + '</option>')
        });
    }
}

$(document).ready(function(){
    // при загрузке страници наполняем select странами
    renderOptions(countries, countrySelect); 
    
    countrySelect.change(function(){
        // тут вместо switch используем 
        // if($(this).val() != 0) {
        //     $.ajax({
        //         url: 'path/to/serverside/script',
        //         type: 'get',
        //         data: {'countryId': $(this).val()},
        //         success: function(data){
        //             renderOptions(data, citySelect);
        //         }
        //     });
        // }else{
        //     renderOptions(false, citySelect);
        // }
        switch($(this).val()) { 
            case '0': {renderOptions(false, citySelect);} break; // 
            case '1': {renderOptions(cities1, citySelect);} break;
            case '2': {renderOptions(cities2, citySelect);} break;
        }
    });
    
});