JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.blueopal.min.css">
<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.aspnetmvc.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.web.min.js"></script>
<table id="states"></table>
<select id ="select"> </select>

JavaScript

var usStates = [{
    name: 'ALABAMA',
    abbreviation: 'AL'
}, {
    name: 'ALASKA',
    abbreviation: 'AK'
}, {
    name: 'ARIZONA',
    abbreviation: 'AZ'
}];

var cities = {
    'AL': [{
        name: 'Birmingham'
    }, {
        name: 'Montgomery'
    }],
        'AK': [{
        name: 'Anchorage'
    }, {
        name: 'Fairbanks'
    }, {
        name: 'Juneau'
    }],
        'AZ': [{
        name: 'Phoenix'
    }, {
        name: 'Tucson'
    }]
};


// Grid initialization

$("#states").kendoGrid({
    selectable: "multiple",
    dataSource: {
        data: usStates
    },
    change: function() {
        var that = this;
        var html = "";
        this.select().each(function() {
            var dataItem = that.dataItem(this);
            html += "<option>" + dataItem.name +"</option>";
        });
        $("#select").html(html);
    }
});