I am trying to add a drop down in a div dynamically[jQuery] but its not working. I want following structure:

<select id="surah_selection" style="position:relative; top:10px; left:25px"> 
      <option id="1">Select Surah</option> 
      <option id="2" >Al-Baqra</option>
      <option id="3">Al-Fatiha</option>
      <option id="4">Al-noor</option>
      <option id="5">Al-Tobah</option>
</select>  <!--Surah selection ends -->

I have read this but it did not work.

Here is what I've tried:

$('#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");
});

I am trying to add a drop down in a div dynamically[jQuery] but its not working. I want following structure:

<select id="surah_selection" style="position:relative; top:10px; left:25px"> 
      <option id="1">Select Surah</option> 
      <option id="2" >Al-Baqra</option>
      <option id="3">Al-Fatiha</option>
      <option id="4">Al-noor</option>
      <option id="5">Al-Tobah</option>
</select>  <!--Surah selection ends -->

I have read this but it did not work.

Here is what I've tried:

$('#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");
});

• javascript
• jquery
• drop-down-menu

• 5 Reading will not be enough, Just implement it. – Rajaprabhu Aravindasamy Commented Jan 1, 2014 at 11:33
• Check a fully explained solution here stackoverflow.com/questions/20857764/… maybe it will help you a lot. – Marios Fakiolas Commented Jan 1, 2014 at 11:34
• 3 You need to be more precise when ur saying "its not working", as its difficult for us to understand the problem – dreamweiver Commented Jan 1, 2014 at 11:34

3 Answers 3

Check the bellow fiddle. This will help you. Change them according to your need.

$('#book_selection').change(function(){
    var newSelect=document.createElement('select');
    var selectHTML="";
    for(i=0; i<choices.length; i=i+1){
        selectHTML+= "<option value='"+choices[i]+"'>"+choices[i]+"</option>";
    }

    newSelect.innerHTML= selectHTML;
    document.getElementById('book_selection').appendChild(newSelect);
});

$(document).ready(function(){
var newSelect=document.createElement('select');
    var selectHTML="";
   /* for(i=0; i<choices.length; i=i+1){
        selectHTML+= "<option value='"+choices[i]+"'>"+choices[i]+"</option>";
    }*/
    selectHTML+= "<option value='test'>test</option>";

    newSelect.innerHTML= selectHTML;
    document.getElementById('book_selection').appendChild(newSelect);
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="book_selection"></div>

you can also use jquery

$('#book_selection').change(function() {
    $("<select />").append($("<option>", {"value": "me", "text": "me"})).insertAfter($(this));
});

try this

<select id="surah_selection" style="position:relative; top:10px; left:25px"> 
        <option id="1">Select Surah</option> 
        <option id="2" >Al-Baqra</option>
        <option id="3">Al-Fatiha</option>
        <option id="4">Al-noor</option>        
    </select> 

to add a new option to the combobox you can try the following jQuery

<script>
function add(){
        var str="<option id='5'>Al-Tobah</option>"
        $("#surah_selection").append(str);
    }
</script>

by call this function a new option will be added to your Combobox

I'm assuming you have an empty <div> somewhere in your HTML and you want to insert that select into it, for example:

<div class="surah_selection></div>

Then to insert your select into the div you can do this:

var selectSurah = '<select id="surah_selection" style="position:relative; top:10px; left:25px"><option id="1">Select Surah</option><option id="2" >Al-Baqra</option><option id="3">Al-Fatiha</option><option id="4">Al-noor</option><option id="5">Al-Tobah</option></select>';
$(".surah_selection").prepend(selectSurah);

You can view a fiddle here: Fiddle