Question

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

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

例如，如果用户选择：

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

我希望萨利纳斯有一个超链接，以便在选择时，它可以：

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

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

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

完成最终选择后，您可以使用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导航到想要的页面。

＆＃13;

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

＆＃13;

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

＆＃13;

使用Javascript

2 个答案: