HTML 嵌套 select 选项

Question

我不确定 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>

目前正在征求意见和建议。长话短说，这个框将放置在地图旁边，当特定状态被 selected 时，它将显示在地图上，我希望显示该状态的城市列表（仅当状态是 selected，而不是之前）。然后用户可以 select 从选项中查看地图上的城市。如果另一个州被 selected，新 selected 州的新 "dropdown" 城市将会显示，之前 selected 州的城市将再次隐藏起来。

我看过带有 select optgroup 标签 () 的代码，但我也想要隐藏显示功能。

我应该有两个单独的 select 盒子吗？一个填充了州，另一个（最初为空）将在 selected 州时填充城市？或者也许是一个无序列表？零个或一个状态将在任何给定时间被 selected。

Answer 1

有几种方法可以达到您的要求。一种方法是有两个单独的下拉菜单，一个用于州，另一种用于根据所选州自动填充的城市。接下来是，数据源，你会从哪里得到 states/cities 与关联的列表（哪些城市属于哪个州）。这里再次有很多选项，在我分享的例子中，我选择了 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

HTML 嵌套 select 选项

HTML Nesting select options

html

html-select

list

optgroup