JSFiddle - React, Tailwind, and code Playground

by praveen_jegan

HTML

<select id="countires" onchange="fetchStates(this)">
    <option>select countires</option>
</select>
<select id="states">
    <option>select states</option>
</select>

CSS

option[disabled] {


    display: none;


}

JavaScript

var data = {
    "IN": ["tamil nadu", "kerala", "andhra"],
        "PAK": ["islamabad", "karachi"]
};

for (var obj in data) {
    var ele = document.createElement('option');
    ele.value = obj;
    ele.innerHTML = obj;
    document.getElementById('countires').appendChild(ele);
}

function fetchStates(dat) {
    var states = document.getElementById('states');
    states.options.length = 0;

    var def = document.createElement('option');
    def.innerHTML = "select states";
    states.appendChild(def);


    var val = data[dat.value];
    for (var i = 0; i < val.length; i++) {
        var opt = document.createElement('option');
        opt.value = val[i];
        opt.innerHTML = val[i];

        states.appendChild(opt);
    }
    console.log(states)
}