I populated the first select list. For each element in the "selectList.chains" array, I need to create an element, give it a text node that contains its label, set the 'value' attribute on the new element, and finally, add it to the element. So when I select a chain, the second option list should populate with it's sizes. I created a new size array.
//HTML
<div id="selects">
<div id="select1Div" style="float:left;margin-right:15px;"> Select
Your <Chain>
<br>
<select name="firstSelect" id="firstSelect">
<option>----</option>
</select>
</div>
<div id="select2Div"> Select Your <Chain Length><br>
<select name="secondSelect" id="secondSelect">
<option>----</option>
</select>
</div>
//JavaScript
var sel1 = document.getElementById("firstSelect");
var sel2 = document.getElementById("secondSelect");
var selectList = {
"chains": ["rice", "snake", "omega", "neoprene"]
}
var size = new Array()
size["empty"] = ["Select a Length"];
size["rice"] = ["16inch", "18inch", "20inch", "22inch"];
size["snake"] = ["16inch", "18inch", "20inch", "22inch"];
size["omega"] = ["16inch", "18inch"];
size["neoprene"]= ["16inch", "18inch", "20inch"];
for (var i = 0; i < selectList.chains.length; i++) {
//create <option>
var s = document.createElement("option");
//create text node
var t = document.createTextNode(selectList.chains[i]);
// add text node to <option>
s.appendChild(t);
// set value="" on the <option>
s.setAttribute("value", selectList.chains[i]);
// add the new <option> to the <select>
sel1.appendChild(s);
}
// This part will react to user selections on our drop-down list
// and write to the page
sel1.addEventListener("change", function(e) {
//get the selected value from "chains"
var val = this.value;
console.log(this.value);
var s = document.createElement("option");
// use the selected option value to retrieve the list of items from the size array
just added
sel2.innerHTML = "";
for (var i = 0; i < size[this.value].length; i++) {
//create <option>
var s = document.createElement("option");
//create text node
var t = document.createTextNode(size[this.value][i]);
// add text node to <option>
s.appendChild(t);
// set value="" on the <option>
s.setAttribute("value", selectList.chains[i]);
// add the new <option> to the <select>
sel2.appendChild(s);
}
to the change listener, which erases current sel2 content and replaces with the new elements.