refer inline comments
var stateCity = [];
$.each(finalData, function (key, value) {
stateCity.push([value.State, value.City]);
});
var distinctState = [];
stateCity.forEach(function (item) {
if(distinctState.indexOf(item.State)== -1)
distinctState.push(item.State)
});
distinctState.forEach(function (item) {
$("#ddlState").append($("<option></option>").val(item).html(item));
});
populateCity($("#ddlState").val());
function populateCity(state)
{
$("#ddlCity").empty();
stateCity.forEach(function (item) {
if(item.State == state)
$("#ddlCity").append($("<option></option>").val(item.City).html(item.City));
});
}
add
onchange
event to the ddlstate dropdown
onchange="populateCity(this.value)"