drop down finished

by Ken Sprague

HTML

<div id="selects">
            <div id="select1Div" style="float:left;margin-right:15px;"> Select
              Publisher <br>
              <select name="pubSelect" id="pubSelect">
                <option value="-1">Select a Publisher</option>
              </select>
            </div>
            <div id="select2Div">Select Hero
              <br>
              <select name="subSelect" id="subSelect">
                <option>----</option>
                &nbsp;
              </select>
            </div>
          </div>

JavaScript

var pubSelect = document.getElementById('pubSelect');
var subSelect = document.getElementById('subSelect');

//creating object
var selectItems = {
"Marvel":     ['----', 'Spiderman', 'IronMan', 'Thor', 'Moon Night'],
"DC":         ['----', 'Batman', 'Wonder Woman', 'Flash', 'Aquaman'],
"Image":      ['----', 'Spawn', 'Rick Grimmes', 'Savage Dragon', 'Maxx'],
"Dark Horse": ['----', 'Hellboy', 'Ghost', 'Goon', 'Tank Girl']
};

var items = ['----', 'Marvel', 'DC', 'Image', 'Dark Horse'];
popSelect(pubSelect, items);

//looking up the array of items from object 
pubSelect.addEventListener("change", function(e) {
	var selectedOption = pubSelect.options[pubSelect.selectedIndex];
  var selectedValue = selectedOption.value;
  var items = selectItems[selectedValue];
  popSelect(subSelect, items);
});

function popSelect(selectElement, itemsToAppend) {
	selectElement.innerHTML = '';
  for(var i = 0; i < itemsToAppend.length; i++) {
  	var option = document.createElement('option');
    option.value = itemsToAppend[i];
    option.text = itemsToAppend[i];
    selectElement.appendChild(option);
  }
}