HTML嵌套选择选项

我不知道如果选择的标签是最好的一段路要走，但这里是我有：HTML嵌套选择选项

<select size="20" style="width:25%;"> 
<option>State 01</option> 
    <option>City 01</option> 
    <option>City 02</option> 
    <option>City 03</option> 
<option>State 02</option> 
    <option>City 01</option> 
<option>State 03</option> 
    <option>City 01</option> 
    <option>City 02</option> 
</select>

目前我征求意见和建议。长话短说，这个盒子会放在地图旁边，当选择一个特定的状态时，它会显示在地图上，我希望显示该州的城市列表（只有当选择状态时，不之前）。然后用户可以从选项中选择一个城市在地图上查看。如果选择了另一个州，则新选择的州会显示一个新的“下拉”城市，并且之前选定的州的城市将再次隐藏。

我看过选择optgroup标签的代码（https://stackoverflow.com/a/9892421/5003918），但我也希望隐藏显示功能。

我应该只有两个单独的选择框？一个国家填补了，另一个（最初是空的），当一个国家被选中时，这些国家将在城市填补？或者也许是一个无序的列表？零或一个状态将在任何给定的时间被选中。

来源

2015-09-24 Mohammad Ali

你可以把它隐藏所有的onclick一个JavaScript或jQuery的功能，那么只显示一个与该状态 – Mark

有几种方法可以实现你要找的东西。一种方法有两个单独的下拉菜单，一个用于状态，另一个用于根据所选状态自动填充的城市。接下来的事情会是，数据源，你会从哪里得到具有关联的州/城市的列表（哪些城市属于哪个州）。再次有很多选择，在我分享的例子中，我选择了一个JSON的结构，但你可以选择其他的东西。我用纯JS代码，但你可以很容易地使用另一个库吸如JQuery，它会缩短代码行。 JS代码

var States = [{ 
    key: 13, 
    name: "State1", 
    cities: ["City1", "City2", "Silver Spring"] 
}, { 
    key: 2, 
    name: "State2", 
    cities: ["City5", "City9", "City8","San Diego"] 
}]; 
//populate states 
for (var i = 0; i < States.length; i++) { 
    var opt = States[i]; 
    var el = document.createElement("option"); 
    el.textContent = opt.name; 
    el.value = opt.key; 
    StatesList.appendChild(el); 
} 
//Populate initial cities 
populateCities(); 


//populate cities 
function populateCities() { 
    //clear the cities list 
    document.getElementById('CitiesList').options.length = 0; 
    var e = document.getElementById("StatesList"); 
    var selectedState = e.options[e.selectedIndex].value; 
    var listOfCities; 
    for (var i = 0; i < States.length; i++) { 
    if (States[i].key == selectedState) { 
     listOfCities = States[i].cities; 
     break; 
    } 
    } 
    //populate Cities DropDown menu 
    for (var i = 0; i < listOfCities.length; i++) { 
    var opt = listOfCities[i]; 
    var el = document.createElement("option"); 
    el.textContent = opt; 
    el.value = opt; 
    CitiesList.appendChild(el); 
    } 
}

HTML

<div class="DDStyle" id="states" onChange="populateCities()"> 
    States : 
    <select id="StatesList" class="DDStyle" > 
    </select> 
</div> 
<div id="Cities" class="DDStyle"> 
    Cities : 
    <select id="CitiesList" class="DDStyle"> 
    </select> 
</div>

http://codepen.io/anon/pen/wKzqYG

来源

2015-09-24 18:36:38

HTML嵌套选择选项

回答

相关问题