title: Unable to populate the drop down list options with values from an array
body: <p>I want to populate a drop down list with a set of values, from 1,2,.... 100. Currently, I am doing this and its not working.</p>
  
  <p><em>In the head section</em></p>
  
  <pre><code>&lt;script type="text/javascript" src="./jquery-1.8.3.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      var select = document.getElementById("selectAge");
      var options = ["1", "2", "3", "4", "5"];
      for(var i = 0; i &lt; options.length; i++) {
          var opt = options[i];
          var el = document.createElement("option");
          el.textContent = opt;
          el.value = opt;
          select.appendChild(el);
      }​
  &lt;/script&gt;
  </code></pre>
  
  <p>And, then <em>in the form</em>, I have</p>
  
  <pre><code>&lt;label&gt;Age&lt;/label&gt;
  &lt;select id="selectAge"&gt; 
      &lt;option&gt;Select your age&lt;/option&gt;        
  &lt;/select&gt;
  </code></pre>
  
  <hr>
  
  <p>The drop down is not populated with a single value. I mean, I don't understand why its not happening. One correction might be to put the java script code just before the closing <code>&lt;/body&gt;</code> tag, as its supposed to be populated only after the DOM is loaded. But I have even tried that and it does not work.</p>