JSFiddle - React, Tailwind, and code Playground

by Todd Levy

HTML

<form>
    <select id="state_select">
        <option value="">All States</option>
        <option value="AZ">Arizona</option>
        <option value="IL">Illinois</option>
    </select>
    <select id="city_select"></select>
</form>

JavaScript

var citydata = {
    "AZ": [{
        "cityname": "Phoenix"
    }, {
        "cityname": "Tucson"
    }],
        "IL": [{
        "cityname": "Chicago"
    }, {
        "cityname": "Deerfield"
    }]
}

$(document).ready(function () {
    $("#city_select").html('<option value="">All Cities</option>');
    $.each(citydata, function (index, state) {
        $.each(state, function (index, city) {
            var itemval = '<option value="' + city.cityname + '">' + city.cityname + '</option>';
            $("#city_select").append(itemval);
        });
    });

    $(document).on("change", "#state_select", function (event) {
        $("#city_select").html('<option value="">All Cities</option>');
        $.each(citydata[$(this).val()], function (index, city) {
            var itemval = '<option value="' + city.cityname + '">' + city.cityname + '</option>';
            $("#city_select").append(itemval);
        });
    });


});