使用Javascript添加超级链接到层叠下拉列表

Question

我已经尝试将超链接添加到我的Javascript下拉列表，但是当我尝试这样做时，下拉列表不起作用。有三个下拉列表：

1. 州：加利福尼亚州，俄勒冈州）
2. 县：加州有蒙特雷，Alemeda随着城市&俄勒冈州有一个城市即道格拉斯
3. 城市：蒙特利的县，阿拉米达具有城市：

例如，如果用户选择：

1. 州：加利福尼亚州
2. 县：蒙特利
3. 市：萨利纳斯

我想，这样在选择时，它萨利纳斯有一个超链接，它要么：

1. 自动重定向到的超级链接或
2. 有一个按钮来完成操作。

我如何去用下面的代码添加超链接到城市（最终下拉列表）：

的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(); 
    } 
} 
} 

Answer 1

我是做萨利纳斯和冈萨雷斯，您可以通过添加新else if(document.getElementById("citySel").value == "..."){和里面location.href = "link...";做所有的人都一样。只需使用它们的值来检查选择哪个选项并location.href导航到想要的页面。

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>

Answer 2

当最终选择完成后，您可以使用window.location.href = http://DESIRED_URL.com转到所需的页面。在最终选择菜单的onChange方法中或单击按钮时触发。

UPDATE

我创建了一个工作的笔应该做你想做的。我重构了数据以便更易于解析和更加结构化。 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; 
}