HTML Nesting select options

Question

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.

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.

Answer 1

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