Question

191

jquery - How to populate dropdown/select/combobox dynamically?

rated 0 times [ 198] [ 7] / answers: 1 / hits: 33363 / 11 Years ago, wed, january 1, 2014, 12:00:00

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);

});

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

marinalyssak

Add To Favorites

Follow

Total Points: 637

Total Questions: 101

Total Answers: 94

Location: Morocco

Member since Fri, May 22, 2020

4 Years ago

answered 11 Years ago gideonb · Accepted Answer

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));

});