Cascading dropdown using plain JS

Auto selection of single options

by imiguelsalcedo

HTML

<form name="myform" id="myForm">
    <select name="optone" id="stateSel" size="1">
        <option value="" selected="selected">Select state</option>
    </select>
    <br>
    <br>
    <select name="opttwo" id="countySel" size="1">
        <option value="" selected="selected">Please select state first</option>
    </select>
    <br>
    <br>
    <select name="optthree" id="citySel" size="1">
        <option value="" selected="selected">Please select county first</option>
    </select>
</form>

JavaScript

var stateObject = {
    "California": {
        "Monterey": ["Salinas", "Gonzales"],
        "Alameda": ["Berkeley"]
    },
    "Oregon": {
        "Douglas": ["Roseburg", "Winston"],
    },
    "japon": {
        "Douglas": ["Roseburg", "Winston"],
    }
}
window.onload = function () {
    var stateSel = document.getElementById("stateSel"),
        countySel = document.getElementById("countySel"),
        citySel = document.getElementById("citySel");
        citySel2 = document.getElementById("citySel2");
    for (var state in stateObject) {
        stateSel.options[stateSel.options.length] = new Option(state, state);
    }
    stateSel.onchange = function () {
        countySel.length = 1; // remove all options bar first
        citySel.length = 1; // remove all options bar first
        if (this.selectedIndex < 1) {
          countySel.options[0].text = "Please select state first"
          citySel.options[0].text = "Please select county first"
          return; // done   
        }  
        countySel.options[0].text = "Please select county"
        for (var county in stateObject[this.value]) {
            countySel.options[countySel.options.length] = new Option(county, county);
        }
        if (countySel.options.length==2) {
          countySel.selectedIndex=1;
          countySel.onchange();
        }  
        
    }
    stateSel.onchange(); // reset in case page is reloaded
    countySel.onchange = function () {
        citySel.length = 1; // remove all options bar first
        if (this.selectedIndex < 1) {
          citySel.options[0].text = "Please select county first"
          return; // done   
        }  
        citySel.options[0].text = "Please select city"
        
        var cities = stateObject[stateSel.value][this.value];
        for (var i = 0; i < cities.length; i++) {
            citySel.options[citySel.options.length] = new Option(cities[i], cities[i]);
        }
        if (citySel.options.length==2) {
         ...