JSFiddle - React, Tailwind, and code Playground

by Emerson Marini

HTML

<select id="ddlState" class="stdFldWidth ddlState" onchange="setTimeout(paint, 2000)">
    <option value="AL">AL</option>
    <option value="FL">FL</option>
    <option value="GA">GA</option>
</select>
<br />
<select id="ddlCity" class="stdFldWidth ddlCity">
    <option value="">Please select a state above...</option>
</select>

JavaScript

function paint() {
    $('.ddlCity').css('backgroundColor', 'yellow');
}

$(function () {
        var states = {
            AL: ['Birmingham', 'Montgomery', 'Tuscaloosa'],
            FL: ['Miami', 'FtLauderdale', 'Jacksonville'],
            GA: ['Atlanta', 'Macon', 'Athens']
        };
        
        function populateSelect() {
            $('.ddlCity').empty();
            
            var stateSelected = $('.ddlState').val();
            
            if (stateSelected) {
                states[stateSelected].forEach(function (sel) {
                   $('<option>').val(sel).text(sel).appendTo($('.ddlCity'));
                });
            }
        }

        populateSelect();
        
    $('.ddlState').on('change', function() { 
        populateSelect();
        
        return true;
    });
});