我不确定Select标签是否是最好的方法，但这就是我所拥有的：
<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>
目前我正在寻求建议和意见。简而言之，此框将放置在地图旁边，当选择特定状态时，它将显示在地图上，我希望显示该状态的城市列表（仅在选择状态时，而不是之前）。然后，用户可以从选项中选择一个城市以在地图上查看。如果选择了另一个州，将为新选择的州显示新的城市“下拉列表”，之前选择的州的城市将再次隐藏。
我看过使用select optgroup标记（https://stackoverflow.com/a/9892421/5003918）的代码，但我也想要隐藏显示功能。
我应该只有两个单独的选择框吗？一个州填写，另一个（最初为空）将在选择州时填写城市？或者也许是无序列表？在任何给定时间都将选择零或一个州。
1 个答案:
答案 0 :(得分：0)
有几种方法可以实现您的目标。一种方法是拥有两个单独的下拉菜单，一个用于状态，另一个用于根据所选状态自动填充的城市。
接下来的事情是，数据源，您将在哪里获得具有关联的州/城市列表（哪些城市属于哪个州）。这里有很多选项，在我分享的例子中，我选择了JSON的结构，但你可以选择其他任何东西。
我使用纯JS代码，但你可以轻松地使用另一个库作为JQuery，它将缩短代码行。
JS代码
var States = [{
关键：13，
名称：“State1”，
城市：[“City1”，“City2”，“Silver Spring”]
}，{
关键：2，
名称：“State2”，
城市：[“City5”，“City9”，“City8”，“San Diego”]
}];
//填充州
for（var i = 0; i＆lt; States.length; i ++）{
var opt = States [i];
var el = document.createElement（“option”）;
el.textContent = opt.name;
el.value = opt.key;
StatesList.appendChild（EL）;
}
//填充初始城市
populateCities（）;
//填充城市
function populateCities（）{
//清除城市列表
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＆lt; States.length; i ++）{
if（States [i] .key == selectedState）{
listOfCities = States [i] .cities;
打破;
}
}
//填充Cities DropDown菜单
for（var i = 0; i＆lt; listOfCities.length; i ++）{
var opt = listOfCities [i];
var el = document.createElement（“option”）;
el.textContent = opt;
el.value = opt;
CitiesList.appendChild（EL）;
}
}
HTML
＆lt; div class =“DDStyle”id =“states”onChange =“populateCities（）”＆gt;
状态 ：
＆lt; select id =“StatesList”class =“DDStyle”＆gt;
＆LT; /选择＆GT;
＆LT; / DIV＆GT;
＆lt; div id =“Cities”class =“DDStyle”＆gt;
城市：
＆lt; select id =“CitiesList”class =“DDStyle”＆gt;
＆LT; /选择＆GT;
＆LT; / DIV＆GT;
http://codepen.io/anon/pen/wKzqYG