JSFiddle - React, Tailwind, and code Playground

by mickeyvip

HTML

<script src="http://underscorejs.org/underscore.js"></script>
<select id="ddlCountries" class="ddl-countries"></select>
<select id="ddlCities" class="ddl-cities"></select>

CSS

.ddl-countries {
    color:red;
}

JavaScript

var countries = [{
    "id": 1,
        "name": "ישראל"
}, {
    "id": 2,
        "name": "United States"
}];
var citiesByCountry = [{
    "countryId": 1,
        "id": 2,
        "cityName": "ירושלים"
}, {
    "countryId": 1,
        "id": 1,
        "cityName": "תל אביב"
}, {
    "countryId": 2,
        "id": 4,
        "cityName": "Boston"
}, {
    "countryId": 2,
        "id": 5,
        "cityName": "Chicago"
}, {
    "countryId": 2,
        "id": 3,
        "cityName": "New York"
}, {
    "countryId": 2,
        "id": 6,
        "cityName": "Ohayo"
}];

var $ddlCountries = $('#ddlCountries'); 
var $ddlCities = $('#ddlCities');
$(countries).each(function (index, country) {
    var option = $('<option value="' + country.id + '">' + country.name + '</option>');
    //option.attr('id', this.id).text(this.name);
    $ddlCountries.append(option);
});
$ddlCountries.on("change", function (/*obj, obj1*/) {
    $ddlCities.children().remove(); //.end();
    var countryId = parseInt($(this).val(), 10);
    $(citiesByCountry).each(function (index, city) {
        //alert(obj1.id)
        if (countryId == city.countryId) {
            var option = $('<option value="' + city.id + '">' + city.cityName + '</option>');
            //option.attr('id', this.id).text(this.cityName);
            $ddlCities.append(option);
        }
    });
});
$ddlCountries.trigger("change");