选择选项后如何重定向下拉菜单？

Question

我希望能够在从第三个下拉菜单中选择该选项时跳转到该网页。

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

知道如何解决这个问题吗？

Answer 1

添加：

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

在window.onload = function () {的底部应该完成这项工作。

你可能想做类似的事情：

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

Answer 2

将onchange处理程序添加到您的城市选择。

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>

Answer 3

以下行可用于选择框的onChange事件：

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;