Search code examples
javascriptarraysselectdropdownlistfor

I'm trying to populate two select dropdowns dynamically from two arrays


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 &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 

Solution

  • http://jsfiddle.net/mqjagmd9/

    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.