Cascading dropdown using plain JS

by Muhammad Tanzil

HTML

<form name="myform" id="myForm">
			<select name="optone" id="yearSel" size="1">
				<option value="" selected="selected">Select Year</option>
			</select>
			<br>
			<br>
			<select name="opttwo" id="stateSel" size="1">
				<option value="" selected="selected">Please select year first</option>
			</select>
			<br>
			<br>
			<select name="optthree" id="citySel" size="1" citySel.onchange = function();>
            <option value="" selected="selected">Please select state first</option>
        </select>
    </form>

JavaScript

var yearObject = {
    "2016": {
        "California": ["Los Angeles", "San Francisco"],
        "Florida": ["Orlando", "Miami"],
        "New York": ["Manhattan","Brooklyn"]
    },
    "2015": {
        "California": ["Los Angeles", "San Francisco"],
        "Florida": ["Orlando", "Miami"],
        "New York": ["Manhattan","Brooklyn"]
    },
    "2014": {
        "California": ["Los Angeles", "San Francisco"],
        "Florida": ["Orlando", "Miami"],
        "New York": ["Manhattan","Brooklyn"]
    },
    "2013": {
        "California": ["Los Angeles", "San Francisco"],
        "Florida": ["Orlando", "Miami"],
        "New York": ["Manhattan","Brooklyn"]
    }
 }
window.onload = function () {
    var yearSel = document.getElementById("yearSel"),
        stateSel = document.getElementById("stateSel"),
        citySel = document.getElementById("citySel");
        var sortable = [];
    for (var year in yearObject) {
        sortable.push(year);
    }
    sortable.sort(function(a, b){return b-a});
    for (var i = 0; i < sortable.length; i++){
     yearSel.options[yearSel.options.length] = new Option(sortable[i], sortable[i]);
    }
    console.log(sortable);
    yearSel.onchange = function () {
        stateSel.length = 1; // remove all options bar first
        citySel.length = 1; // remove all options bar first
        if (this.selectedIndex < 1) {
          stateSel.options[0].text = "Please select Year first"
          citySel.options[0].text = "Please select state first"
          return; // done   
        }  
        stateSel.options[0].text = "Please select state"
        for (var state in yearObject[this.value]) {
            stateSel.options[stateSel.options.length] = new Option(state, state);
        }
        if (stateSel.options.length==2) {
          stateSel.selectedIndex=1;
          stateSel.onchange();
        }  
        
    }
    yearSel.onchange(); // reset in case page is reloaded
    stateSel.onchange = function () {
        citySel.length...