title: jquery - How to populate dropdown/select/combobox dynamically?
body: <p>I am trying to add a drop down in a div dynamically[jQuery] but its not working. I want following structure:</p>
  
  <pre><code>&lt;select id="surah_selection" style="position:relative; top:10px; left:25px"&gt; 
        &lt;option id="1"&gt;Select Surah&lt;/option&gt; 
        &lt;option id="2" &gt;Al-Baqra&lt;/option&gt;
        &lt;option id="3"&gt;Al-Fatiha&lt;/option&gt;
        &lt;option id="4"&gt;Al-noor&lt;/option&gt;
        &lt;option id="5"&gt;Al-Tobah&lt;/option&gt;
  &lt;/select&gt;  &lt;!--Surah selection ends --&gt;
  </code></pre>
  
  <p>I have read <a href="https://stackoverflow.com/questions/3446768/dynamically-populating-a-dropdown-with-jquery">this</a> but it did not work.</p>
  
  <p>Here is what I've tried:</p>
  
  <pre><code>$('#book_selection').change(function(){
      alert("changed");
      var option = document.createElement("option");
      option.text = 'df';
      option.value = 'df';
      var temp = document.createElement('select');
      temp.appendChild(option);
      var root = document.getElementById('book_selection');
      root.appendChild(temp);
      alert("done");
  });
  </code></pre>