我想從兩個陣列動態填充兩個選擇下拉列表

Question

我填充了第一個選擇列表。對於「selectList.chains」數組中的每個元素，我需要創建一個元素，給它一個包含其標籤的文本節點，在新元素上設置'value'屬性，最後將它添加到元素中。所以當我選擇一個鏈時，第二個選項列表應該填充它的大小。我創建了一個新的大小數組。

// HTML

<div id="selects"> 
    <div id="select1Div" style="float:left;margin-right:15px;"> Select 
       Your &lt;Chain&gt; 
    <br> 

    <select name="firstSelect" id="firstSelect"> 
     <option>----</option> 
    </select> 
</div> 

<div id="select2Div"> Select Your &lt;Chain Length&gt;<br> 
    <select name="secondSelect" id="secondSelect"> 
     <option>----</option>&nbsp; 
    </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 

Answer 1

http://jsfiddle.net/mqjagmd9/

剛剛添加

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); 
    } 

的變化監聽器，它會清除當前SEL2內容，並與新的元素取代。