HTML嵌套选择选项 [英] HTML Nesting select options

问题描述

我不确定Select标记是否是最好的选择，但这就是我所拥有的:

I am not sure if Select tag is the best way to go, but here is what I have:

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

目前，我正在寻求建议.长话短说，这个盒子将放在地图旁边，选择特定状态时，将在地图上显示，我希望显示该状态的城市列表(仅当状态选择时，而不是前).然后，用户可以从选项中选择一个城市以在地图上查看.如果选择了另一个州，则将为新选择的州显示新的下拉"城市，并且先前选择的州的城市将再次隐藏.

Currently I am seeking advice and suggestions. Long story short, this box will be placed next to a map and when a specific state is selected, it will be shown on the map and I am hoping to show a list of cities for that state (only when the state is selected, not before). And then the user can select a city from the options to see on the map. If another state is selected, a new "dropdown" of cities will be shown for the newly selected state and the previously selected state's cities will go into hiding again.

我已经看到了带有选择optgroup标记的代码( https://stackoverflow.com/a/9892421/5003918 )，但我也想要隐藏显示功能.

I have seen code with select optgroup tag (https://stackoverflow.com/a/9892421/5003918), but I am wanting the hide-show functionality as well.

我应该只有两个单独的选择框吗?一个州填充了州，而另一个州(最初是空的)在选定州后将被城市填充?还是无序列表?在任何给定时间将选择零或一个状态.

Should I just have two separate select boxes? One with states filled in, and another (initially empty) which will be filled in with cities when a state is selected? Or perhaps an unordered list? Zero or one state will be selected at any given time.

推荐答案

有两种方法可以实现您想要的目标.一种具有两个单独的下拉菜单的方式，一种用于州，一种用于根据所选州自动填充的城市.接下来是数据源，您将在哪里获得具有关联的州/城市列表(哪些城市属于哪个州).再次有很多选项，在我共享的示例中，我选择了 JSON 的类似结构，但是您可以选择其他任何东西.我使用的是纯JS代码，但是您可以轻松地将另一个库作为 JQuery 使用，这将缩短代码行. JS代码

There are couple of ways to achieve what you're looking for. One way to have two separate drop-down menus , one for states and one for cities that got populated automatically based on the selected state. Next thing will be , the data source , where would you get the list of states/cities with association (which cities belong to which state). Once again there are a lot of options here , In the example i am sharing , I chose a JSON ' s like structure but you can pick anything else. I used pure JS code but you can easily use another library suck as JQuery and it will shorten the lines of code. JS CODE

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嵌套选择选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！