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