Question

我不确定这个问题是否在正确的地方，所以如果不是，我会道歉。我正在使用下拉表单来选择一个单击时进入状态页面的状态。但是，我希望能够调整表单，以便在单击状态时，旁边的框会加载该状态中的城市。单击一个城市后，它将转到正确的页面。不知道如何做到这一点，我现在使用的状态内联形式如下：

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

谢谢

安德鲁

Answer 1

<强>更新

使用JavaScript从数组中获取城市，链接到选择列表中的状态

示例：

Select a state

1）选择州加利福尼亚州，将出现一个新的下拉列表，您将被告知Selected State: California

Select a city

2）如果您选择城市Los Angeles，系统会将您定向到：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语句：

switch(s.options[s.selectedIndex].value){
        case "stateCalifornia":
            createSelector(californiaCities, s);
            break;
        case "stateTexas":
            createSelector(texasCities, s);
            break;
        case "stateNewYork":
            createSelector(newYorkCities, s);
            break;
}

Answer 2

<div align="center">
  <form>
    <select name="URL" onchange="window.location.href=this.value">
      <option selected="selected" value="">Select State Name</option>
      <option value="state link page">State Name</option>
      <option value="state link page">State Name</option>
    </select>
  </form>
</div>

在州页面上

<div align="center">
  <form>
    <select name="cities" onchange="window.location.href=this.value">
      <option selected="selected" value="">Select State Name</option>
      <option value="City link page">City Name</option>
      <option value="City link page">City Name</option>
    </select>
  </form>
</div>

Answer 3

使用IFrame怎么样？如果你愿意使用像JQuery这样的库，那么你可以使用AJAX做得更好，你可以在DIV上使用.load。但是如果没有JQuery，你可以这样做：

HTML：

<div align="center">
    <form>
        <select id="selectBox" name="URL">
            <option selected="selected" value="">Select State Name</option>
            <option value="florida">Florida</option>
            <option value="texas">Texas</option>
        </select>
        <iframe id="statePage"></iframe>
    </form>
</div>

JavaScript的：

selectionChange = function() {
    var elStatePage = document.getElementById('statePage'); 
    elStatePage.src = 'states/' + this.value + '.htm';
}

var e = document.getElementById('selectBox'); 
e.onchange = selectionChange;

的jsfiddle： http://jsfiddle.net/zXz8s/

html表单选择州和城市

3 个答案: