使用 Javascript 将超链接添加到级联下拉菜单答案

【问题标题】：Add hyperlinks to Cascading Dropdown using Javascript使用 Javascript 将超链接添加到级联下拉菜单
【发布时间】：2017-12-18 11:52:08
【问题描述】：

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

州：加利福尼亚州、俄勒冈州）
县：加利福尼亚州有蒙特雷、阿莱梅达和俄勒冈州有一个城市，即道格拉斯
城市：阿拉米达蒙特里县拥有城市：

例如，如果用户选择：

州：加利福尼亚
县：蒙特雷
城市：萨利纳斯

我希望 Salinas 有一个超链接，以便在选择它时：

自动重定向到超链接或
有一个按钮可以完成操作。

如何使用以下代码将超链接添加到城市（最终下拉列表）：

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

【问题讨论】：

在此处查看 espacarello 的答案。这将有助于stackoverflow.com/questions/12287672/…
@Daniel Zuzevich 这不是一个单一的下拉菜单。这个问题和我的不同，我已经看过了。我的问题中的下拉项放在 javascript 文件本身中，如我的代码所示。

标签： javascript html hyperlink

【解决方案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;
}

【讨论】：

如果我的理解正确，你会想为城市选择创建一个 onChange 方法并在那里执行。 citySel.onchange = function() { ... Some code; window.location.href = your url; };
你能为萨利纳斯做吗？我不太确定把它放在我的 javascript 文件中的哪个位置
其中一些代码令人困惑。为什么需要处理页面刷新的情况？您的下拉列表值仅存储在内存中，如果您首先刷新页面，则会重置。
@Daniel Zuzevich 你问：“为什么你需要处理页面被刷新的情况？”。回答你的问题：我没有。您对此有何建议？
@RickTakes 您在答案更新中包含的代码破坏了下拉菜单

【解决方案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>

【讨论】：