使用Javascript将超链接添加到级联下拉列表

Question

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

1. 州：加利福尼亚，俄勒冈州）
2. 县：加利福尼亚州有蒙特利，阿莱梅达市，俄勒冈州有一个城市，即道格拉斯
3. 城市：阿拉米达的蒙里县设有城市：

例如，如果用户选择：

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

我希望萨利纳斯（Salinas）具有超链接，以便在选择它时可以：

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>

Java脚本

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

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

更新

我创建了一支工作笔，可以完成您想要的工作。 我对数据进行了重组，以使其更易于解析并且结构化了一些。 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;
}

Answer 2

我是为Salinas和Gonzales做的，您可以通过添加新的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>