我不确定这个问题是否出现在正确的位置，如果不是，我深表歉意。我正在使用下拉表单来选择一个状态，单击该状态会转到状态页面。但是，我希望能够调整表单，以便在单击某个州时，它旁边的框会加载该州内的城市。单击城市后，它会转到正确的页面。不知道该怎么做，我现在使用的状态内联表单如下:
<div align="center">
<form>
<select name="URL" onchange="window.location.href=this.form.URL.options[this.form.URL.selectedIndex].value">
<option selected="selected" value="">Select State Name</option>
<option value=" state link page</option>
</select>
</form>
</div>
谢谢
安德鲁
最佳答案
已更新
使用 JavaScript 从数组中获取城市，链接到选择列表中的州
例子:
1) 选择加利福尼亚州，会出现一个新的下拉列表，你会被告知Selected State: California
2) 如果您选择城市洛杉矶，您将被定向到:cites/los_angeles.html
代码:代码应该很容易复制，但如果您希望我向您解释如何添加更多城市/州，我可以。
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<style type="text/css">
body{
background-color: #EEEEEE;
font-family: "Open Sans";
font-size: 16px;
text-align: center;
}
.center{
margin: auto;
width: 425px;
}
.selector{
font-family: "Open Sans";
font-size: 18px;
width: 425px;
margin-left: auto;
margin-right: auto;
position: relative;
text-align: center;
}
.heading{
font-family: "Open Sans";
font-size: 32px;
text-align: center;
}
a{
text-decoration: none;
color: #F00;
}
</style>
<script type="text/javascript">
function stateSelected(){
var s = document.getElementById("stateSelect");
var californiaCities = new Array("Los Angeles", "San Francisco");
var texasCities = new Array("Houston", "Dallas");
var title = document.createElement("p");
title.innerHTML = "Select a city:"
title.className = "heading";
document.body.appendChild(title);
switch(s.options[s.selectedIndex].value){
case "stateCalifornia":
createSelector(californiaCities, s);
break;
case "stateTexas":
createSelector(texasCities, s);
break;
}
}
function createSelector(array, s){
var sState = document.createElement("p");
sState.innerHTML = "Selected State: " + s.options[s.selectedIndex].text;
document.body.appendChild(sState);
var sTitle = document.getElementById("sTitle");
sTitle.parentNode.removeChild(sTitle);
s.parentNode.removeChild(s);
var newSelect = document.createElement("select");
var holder = document.createElement("div");
holder.className = "center";
var selectOption = document.createElement("option");
selectOption.selected = "selected";
selectOption.value = "";
selectOption.text = "Select a city";
newSelect.appendChild(selectOption);
for(var i = 0; i < array.length; ++i){
var newOption = document.createElement("option");
newOption.value = "city" + array[i].replace(/\s+/g, '');
newOption.text = array[i];
newSelect.onchange = townSelected;
newSelect.id = "citySelect";
newSelect.appendChild(newOption);
}
newSelect.className = "selector";
holder.appendChild(newSelect);
document.body.appendChild(holder);
}
function townSelected(){
var c = document.getElementById("citySelect");
window.location.href = "cities/" + c.options[c.selectedIndex].text.replace(/\s+/g, '_').toLowerCase() + ".html";
}
</script>
</head>
<body>
Made a mistake? <a href="#" onclick="location.reload()">Start Again</a>
</br>
<p id="sTitle" class="heading">Select a state:</p>
<div class="center">
<select id="stateSelect" onchange="stateSelected();" class="selector">
<option value="" selected="selected">Select a state</option>
<option value="stateCalifornia">California</option>
<option value="stateTexas">Texas</option>
</select>
</div>
</body>
</html>
如何添加更多城市:
在数组中，例如 californiaCities，它表示 var californiaCities = new Array("Los Angeles", "San Francisco");。要添加另一个城市，只需将数组更改为 var californiaCities = new Array("Los Angeles", "San Francisco", "San Diego");，然后 createSelector() 函数会为你做这一切
如何添加更多状态(稍微复杂一点):
在选择框 selectState 中，添加另一个选项，尽量保持相同的格式 (stateStateName):
<option value="stateNewYork">New York</option>
然后，像 californiaCities 一样创建一个数组:
var newYorkCities = new Array("New York City", "Albany");
然后，在下面的 switch 语句中，在前面的 break; 语句下添加以下内容:
case "stateNewYork":
createSelector(newYorkCities, s);
break;
总结:所以现在，你会有这样的东西:
(HTML) 状态选择器:
<select id="stateSelect" onchange="stateSelected();" class="selector">
<option value="" selected="selected">Select a state</option>
<option value="stateCalifornia">California</option>
<option value="stateTexas">Texas</option>
<option value="stateNewYork">New York</option>
</select>
(JavaScript) 数组声明:
var californiaCities = new Array("Los Angeles", "San Francisco", "San Diego");
var texasCities = new Array("Houston", "Dallas");
var newYorkCities = new Array("New York City", "Albany");
(JavaScript)切换语句:
switch(s.options[s.selectedIndex].value){
case "stateCalifornia":
createSelector(californiaCities, s);
break;
case "stateTexas":
createSelector(texasCities, s);
break;
case "stateNewYork":
createSelector(newYorkCities, s);
break;
}
关于html 表单选择州和城市，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20857556/