Tom C. Tom C. - 4 months ago 7
Javascript Question

How to sort variables in my particular case

I would like to sort "years" in var yearObject so the menu starts with 2016 instead of 2013. Please help. Example of code is provided here.

My 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>


My JS:

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");
for (var year in yearObject) {
yearSel.options[yearSel.options.length] = new Option(year, year);
}
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 = 1; // remove all options bar first
if (this.selectedIndex < 1) {
citySel.options[0].text = "Please select state first"
return; // done
}
citySel.options[0].text = "Please select city"

var cities = yearObject[yearSel.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) {
citySel.selectedIndex=1;
citySel.onchange();
}

}
citySel.onchange = function(){
switch(citySel.value){

case "Los Angeles":
if(yearSel.value == "2016"){
location.href="http://google.com";
}else if(yearSel.value == "2015","2014"){
location.href= "http://facebook.com";
}
break;
case "Miami":
if(yearSel.value == "2016","2015"){
location.href="http://google.com";
}else if(yearSel.value == "2014","2013"){
location.href= "http://facebook.com";
}
break;
}
}
}

Answer

You need to create separate array for year and sort it using sort() function in javascript.

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]);
}

Have a look at the Fiddle