HTML Nesting select options

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