After setting up the first select list, the task at hand is to generate elements for each item in the "selectList.chains" array. Each element must consist of a label text node and a 'value' attribute before being appended to another element. This will allow the second option list to populate with sizes corresponding to the selected chain. A new size array has been created to facilitate this process.
//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 section 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