JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<select id="countySel"></select>
<select id="stateSel"></select>

JavaScript

let stateObject = {
        "India": ["Delhi", "Kerala", "Goa"],
        "United States": ["Alabama", "Alaska", "Idaho"],
        "Australia": ["South Australia", "Victoria"],
        "Canada": ["Alberta", "Columbia"],
    }

window.onload = function() {

    let countySel = document.getElementById("countySel"),
        stateSel = document.getElementById("stateSel")

    for (let country in stateObject) {
        countySel.options[countySel.options.length] = new Option(country, country)
    }

    countySel.onchange = function () {
        stateSel.options.length = 0
        for (let state of stateObject[this.value]) {
            stateSel.options[stateSel.options.length] = new Option(state, state)
        }
    }
}