JSFiddle - React, Tailwind, and code Playground

by Balaganesanr

HTML

<html>
<head>
<title>Json Sample</title>
<script>
function fnDrpChange()
{
try
{
var countries =
{
    "table" :
    [
        {"countryid": "0", "countryname": "Japan"},
        {"countryid": "1", "countryname": "India"},
        {"countryid": "2", "countryname": "Pakistan"},
        {"countryid": "3", "countryname": "Srilanka"}
    ]
};
var listItems ="";
for (var i = 0; i < countries.table.length; i++) {
    listItems += "<option value='" + countries.table[i].countryid + "'>" + countries.table[i].countryname + "</option>";
}
document.getElementById("ddlcountries").innerHTML =listItems;
}
catch(e)
{
alert(e);
}
}

function fnCountryChange(countryid)
{
try
{
var states =
{
    "table" :
    [
        {"countryid": "1", "stateid": "1", "statename": "TamilNadu"},
        {"countryid": "1", "stateid": "2", "statename": "Andra"},
        {"countryid": "1", "stateid": "3", "statename": "Kerala"}
    ]
};
var listItems ="";
for (var i = 0; i < states.table.length; i++) {
if(countryid == states.table[i].countryid)
{
    listItems += "<option value='" + states.table[i].stateid + "'>" + states.table[i].statename + "</option>";
}
}
document.getElementById("ddlstates").innerHTML =listItems;
}
catch(e)
{
alert(e);
}
}

</script>
</head>
<body onload="fnDrpChange()">
<select id="ddlcountries" onclick="fnCountryChange(this.value)"></select>
<select id="ddlstates"></select>
</body>
</html>