JSFiddle - React, Tailwind, and code Playground

HTML

<select id="us_state"></select>

<select id="city_name"></select>

JavaScript

var data = {
    "State 1": ["City 1", "City 2"],
    "State 2": ["City 3", "City 4"],
    "State 3": ["City 5", "City 6", "City 7"]
};


var $states = $("#us_state").on("change", function() {
    var cities = $.map(data[this.value], function(city) {
        return $("<option />").text(city);
    });
    $("#city_name").empty().append(cities);
});

for (var state in data) {
    $("<option />").text(state).appendTo($states);
}

$states.change();