Add hyperlinks to Cascading Dropdown using Javascript

Question

I've tried adding hyperlinks to my Javascript dropdown list, but when I try to do so, the dropdown list doesn't work. There are three drop downs:

State: California, Oregon)
County: California has Monterey, Alemeda as cities & Oregon has one city namely Douglas
City: The counties of Montery, Alameda has cities:

For example, If a user chooses:

State: California
County: Monterey
City: Salinas

I want Salinas to have a hyperlink so that when it is chosen, it either:

Redirects automatically to the hyperlink or
There is a button to complete the action.

How do I go about adding Hyperlinks to the cities (the final dropdown) with the following code:

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>

Javascript

var stateObject = {
"California": {
    "Monterey": ["Salinas", "Gonzales"],
    "Alameda": ["Berkeley"]
},
"Oregon": {
    "Douglas": ["Roseburg", "Winston"],
}
}
window.onload = function () {
var stateSel = document.getElementById("stateSel"),
    countySel = document.getElementById("countySel"),
    citySel = document.getElementById("citySel");
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) {
      citySel.selectedIndex=1;
      citySel.onchange();
    }  
 }   
}

Go to the espacarello's answer here. This will help https://stackoverflow.com/questions/12287672/links-in-select-dropdown-options — Dan Zuzevich, Jul 13 '17 at 15:31
@Daniel Zuzevich This is not a single dropdown. That question is different from mine, I have seen it already. The dropdown items in my question is placed in the javascript file itself as shown in my code. — Sebastian, Jul 13 '17 at 15:36

RickTakes · Answer 1 · 2017-07-13T16:51:55.177

When the final selection is made you can use window.location.href = http://DESIRED_URL.com to go to the desired page. Fire this in the onChange method of your final select menu or when a button is clicked.

UPDATE

I've created a working pen that should do what you want. I restructured the data to make it easier to parse and a bit more structured. https://codepen.io/RTakes/pen/gRqBev

var stateObject = [
  {
    state: "California",
    counties: [
      {
        county: "Monterey",
        cities: [
          { 
            city: "Salinas", 
            cityLink: 'http://google.com'
          },
          { 
            city: "Gonzales", 
            cityLink: 'http://google.com'
          }
        ]
      },
      {
        county: "Alameda",
        cities: [
          { 
            city: "Berkeley", 
            cityLink: 'http://google.com'
          }
        ]
      }
    ]
  },
  {
   state: "Oregon",
   counties: [
      {
        county: "Douglas",
        cities: ["Roseburg", "Winston"],
        cities: [
          { 
            city: "Roseburg", 
            cityLink: 'http://google.com'
          },
          { 
            city: "Winston", 
            cityLink: 'http://google.com'
          }
        ]
      }
    ]
  }
];


var stateSel = document.getElementById("stateSel"),
    countySel = document.getElementById("countySel"),
    citySel = document.getElementById("citySel");
 stateSel.options[0] = new Option('Select a State', null, true);  
 stateObject.forEach((state, index) => {
  stateSel.options[index + 1] = new Option(state.state, index);  
 })

stateSel.onchange = function (event) {
    var selectedIndex = parseInt(this.value);
  console.log(event)

    clearSelect(countySel);
  countySel.options[0] = new Option('Select a County', null, true) 
  stateObject[selectedIndex].counties.forEach((county, index) => {
    countySel.options[index + 1] = new Option(county.county, index);  
    })
}

countySel.onchange = function (event) {
    var selectedStateIndex = stateSel.selectedIndex;
    var selectedIndex = parseInt(this.value);
  var cities = stateObject[selectedStateIndex].counties[selectedIndex].cities;
    clearSelect(citySel);

  citySel.options[0] = new Option('Select a City', null);  
  cities.forEach((city, index) => {
    citySel.options[index + 1] = new Option(city.city, city.cityLink);  
    })  
}

citySel.onchange = function(event) {
    var value = this.value;
  console.log(value)
  // window.location.href = value;
}


function clearSelect (select) {
    select.options.length = 0;
}

If I'm understanding correctly, you'd want to create an onChange method for the city select and do it there. `citySel.onchange = function() { ... Some code; window.location.href = your url; };` — RickTakes, Jul 13 '17 at 15:39
Can you do it for Salinas? I'm not quite sure where to place this exactly in my javascript file — Sebastian, Jul 13 '17 at 15:41
Some of this code is confusing. Why do you need to handle a case in which the page is refreshed? Your dropdowns values are only stored in memory, and would be reset if you refreshed the page in the first place. — Dan Zuzevich, Jul 13 '17 at 15:46
@Daniel Zuzevich you asked: "Why do you need to handle a case in which the page is refreshed?". To answer your question: I don't. What is your sugestion with regard to that? — Sebastian, Jul 13 '17 at 15:48
@RickTakes The code that you included in the update to your answer breaks the dropdown — Sebastian, Jul 13 '17 at 17:42
Did the codepen work the way you expected or am I misunderstanding what you are trying to do @Sebastian? — RickTakes, Jul 13 '17 at 18:14

Djordje Vujicic · Accepted Answer · 2017-07-13T17:00:46.677

I did it for Salinas and Gonzales, you can do the same for all of them by adding new else if(document.getElementById("citySel").value == "..."){ and inside it location.href = "link..."; . Just use their value to check which option is chosen and location.href to navigate to the wanted page.

function myFunction(){

if(document.getElementById("citySel").value == "Salinas"){
location.href = "https://en.wikipedia.org/wiki/Salinas,_California";
}else if(document.getElementById("citySel").value == "Gonzales"){
location.href = "https://en.wikipedia.org/wiki/Gonzales,_California";
}


}

var stateObject = {
"California": {
    "Monterey": ["Salinas", "Gonzales"],
    "Alameda": ["Berkeley"]
},
"Oregon": {
    "Douglas": ["Roseburg", "Winston"],
}
}
window.onload = function () {
var stateSel = document.getElementById("stateSel"),
    countySel = document.getElementById("countySel"),
    citySel = document.getElementById("citySel");
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) {
      citySel.selectedIndex=1;
      citySel.onchange();
    }  
 }   
}

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

<button onclick="myFunction()">search</button>

Add hyperlinks to Cascading Dropdown using Javascript

2 Answers2