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

-2

我希望能够从第三个下拉菜单中选择选项时跳转到网页。如何选择选项时重定向下拉菜单？

的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

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

来源

2016-07-22 Tom C.

您的问题不明确，是它下拉菜单，你想帮助或打开网页？ –

你能否澄清你的意思，并提供一些示例代码或示例？ –

我需要添加重定向功能，因此当您选择城市时，它将被重定向到网页。 –

添加：

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

截至window.onload = function() {底部应该做的工作。

您probabily想要做的事，如：

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

来源

2016-07-22 15:40:24

但是价值呢？像开关（this.value） –

@TomC。我不确定你在说什么。如果你需要重定向来完成这项工作！你为什么想在这个值上添加一个开关？ –

@TomC。您可以使用citySel.value获取citySel的值 –

添加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) { 
 
     \t 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>

来源

2016-07-22 15:41:53 Phil

下面这行可以在onChange事件可用于选择框：

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

来源

2016-07-22 15:42:34 tnschmidt

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

回答

相关问题