title: Dynamically add drop down list
body: <p>I can dynamically add text boxes like this:</p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
  
  &lt;div id='item'&gt;&lt;/div&gt;
  
  &lt;input name='add' type='button' id='add' value='Add Item'/&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  
  &lt;script type="text/javascript"&gt;
  
  var item = document.getElementById('item');
  
  var stopper=0;
  
  document.getElementById('add').onclick = function () {
  
  stopper=stopper+1;
  
    var input = document.createElement('input'),
        div = document.createElement('div');
    input.type = "text";
    input.setAttribute("name", "item[]");
    input.setAttribute("class", "item");
  
    div.appendChild(input);
    //...
  
    item.appendChild(div);
  
  };
  &lt;/script&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/2rF54/" rel="nofollow">JS Fiddle</a></p>
  
  <p>How can I do this? Instead of <em>text box</em>, I want to dynamically generate a <em>drop down</em> (<code>&lt;select&gt;</code>). And the <em>option</em> of the drop down would be coming from my <em>SQL database</em>.</p>