-2

I want to be able to jump to the web page when the option is selected from the third drop down menu.

Javascript:

var stateObject = {
    "California": {
        "Monterey": ["Salinas", "Gonzales"],
        "Alameda": ["Oakland", "Berkeley"]
    },
    "Oregon": {
        "Douglas": ["Roseburg", "Winston"],
        "Jackson": ["Medford", "Jacksonville"]
    }
}
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) return; // done   
        for (var county in stateObject[this.value]) {
            countySel.options[countySel.options.length] = new Option(county, county);
        }
    }
    stateSel.onchange(); // reset in case page is reloaded
    countySel.onchange = function () {
        citySel.length = 1; // remove all options bar first
        if (this.selectedIndex < 1) return; // done   
        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]);
        }
    }
}

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>

example

Any idea how to resolve this?

4
  • 1
    Your questions not clear, is it the dropdown menu you want help with or opening the webpage? Commented Jul 22, 2016 at 15:36
  • Could you clarify what you mean and provide some sample code or and example?
    – Isabel Inc
    Commented Jul 22, 2016 at 15:36
  • I need to add the redirect function so when you select the city it gets redirected to the web page.
    – Tom C.
    Commented Jul 22, 2016 at 15:39
  • {uri:'http://msn.com', text: ['someText']} better yet TextLink(link, text){ this.link = link || ''; this.text = text || []; }
    – Jay
    Commented Jul 22, 2016 at 17:23

3 Answers 3

0

Adding:

citySel.onchange = function(){
        window.location.href = "http://google.it";
}

At the bottom of window.onload = function () { should do the job.

You probabily want to do something like:

citySel.onchange = function(){
switch(citySel.value){
case "Salinas":
        window.location.href = "http://salinas.com";
break;
case "Gonzales":
    if(stateSel.value == "Something"){
        window.location.href = "http://gonzales.com";
    }else if(stateSel.value == "Else"){
        window.location.href = "http://gonzales.com";
    }
break;
}
15
  • but what about the value? like switch(this.value)
    – Tom C.
    Commented Jul 22, 2016 at 15:43
  • @TomC. I'm not sure about what are you refering to. If you need a redirect that will do the job! Why would you like to add a switch on the value? Commented Jul 22, 2016 at 15:44
  • @TomC. You can get the value of citySel using citySel.value Commented Jul 22, 2016 at 15:45
  • When I select "Salinas" it takes me to the particular page.
    – Tom C.
    Commented Jul 22, 2016 at 15:51
  • But when i select "Gonzales" it should be a different page.
    – Tom C.
    Commented Jul 22, 2016 at 15:51
0

Add onchange handler to your city select.

var stateObject = {
    "California": {
        "Monterey": ["Salinas", "Gonzales"],
        "Alameda": ["Oakland", "Berkeley"]
    },
    "Oregon": {
        "Douglas": ["Roseburg", "Winston"],
        "Jackson": ["Medford", "Jacksonville"]
    }
}
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) return; // done   
        for (var county in stateObject[this.value]) {
            countySel.options[countySel.options.length] = new Option(county, county);
        }
    }
    stateSel.onchange(); // reset in case page is reloaded
    countySel.onchange = function () {
        citySel.length = 1; // remove all options bar first
        if (this.selectedIndex < 1) return; // done   
        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]);
        }
    }
    
    citySel.onchange = function () {
        if(stateSel.options.length > 0 && countySel.options.length) {
        	alert('County: '+countySel.value + ' - State: ' +stateSel.value + ' - City: ' +citySel.value);
          location.href = '/'; // your link
        }
    }
}
<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>

0

The following line can be used in an onChange event for the select box:

window.location.replace("http://YOUR-URL-HERE.com");

var stateObject = {
    "California": {
        "Monterey": ["Salinas", "Gonzales"],
        "Alameda": ["Oakland", "Berkeley"]
    },
    "Oregon": {
        "Douglas": ["Roseburg", "Winston"],
        "Jackson": ["Medford", "Jacksonville"]
    }
}
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) return; // done   
        for (var county in stateObject[this.value]) {
            countySel.options[countySel.options.length] = new Option(county, county);
        }
    }
    stateSel.onchange(); // reset in case page is reloaded
    countySel.onchange = function () {
        citySel.length = 1; // remove all options bar first
        if (this.selectedIndex < 1) return; // done   
        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]);
        }
        
        
    }
    citySel.onchange = function () {
    //redirect page
    	window.location.replace("http://stackoverflow.com");
    }
}
<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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.