Dynamic combobox-listbox-drop-down using javascript

Want to populate dynamically combobox-listbox-drop-down using javascript? Let us see a very simple script to do this. First let us see createElement() of document object in javascript.
//Create a table element dynamically var table = document.createElement("table"); //Create a select element dynamically var select = document.createElement("select"); //Create a option element dynamically var option = document.createElement("option");
Code language: JavaScript (javascript)
Thus, createElement method takes a parameter which is the string that specifies the name for the element node and returns the element node. Let us see how can we populate a dropdown or combobox using this method. Following is the html file of our example:
<HTML> <HEAD> <TITLE>Dynamically populating drop down, combobox, list box using JavaScript</TITLE> <SCRIPT language="javascript" src="config.js"></SCRIPT> </HEAD> <BODY style="font-family: sans-serif"> <fieldset> <legend>Combo box</legend> Add to Combo: <input type="text" name="txtCombo" id="txtCombo"/> <input type="button" value="Add" onclick="addCombo()"> <br/> Combobox: <select name="combo" id="combo"></select> </fieldset> </BODY> </HTML>
Code language: HTML, XML (xml)
And following is the javascript file:
function addCombo() { var textb = document.getElementById("txtCombo"); var combo = document.getElementById("combo"); var option = document.createElement("option"); option.text = textb.value; option.value = textb.value; try { combo.add(option, null); //Standard }catch(error) { combo.add(option); // IE only } textb.value = ""; }
Code language: JavaScript (javascript)
Thus, when we provide a value in text box and click the Add button, a new option element is created using document.createElement method. The attributes of the option element are set using the method .setAttribute(). And finally the option is added to combo using .add() method.

Demo

Dynamic Listbox using JavaScript
Get our Articles via Email. Enter your email address.

You may also like...

36 Comments

  1. Doris says:

    06/23/10 03:23p Greetings Viral Patel;
    This is a great script! How would you modify it so the textxbox would also be populated with the values from a textarea??? Thanks :)

    ´*•.¸(`*•.¸?¸.•*´)¸.•*´
    ?«´•°*42DoubleDDs*°•´»?
    .¸.•*(¸.•*´?`*•.¸) *•.¸

  2. Doris says:

    CORRECTION: How would you modify it so the combobox would also be populated with the values from a textarea??? Thanks :)

    ´*•.¸(`*•.¸?¸.•*´)¸.•*´
    ?«´•°*42DoubleDDs*°•´»?
    .¸.•*(¸.•*´?`*•.¸) *•.¸

  3. Fatiha says:

    Too Gud..you make my life easy :)

  4. Nice work! Love it!

  5. keyuri says:

    nice
    thanks

  6. aqiqah says:

    how clear data in combo box?
    thanks

  7. helpquery says:

    Very nice …………..Above example helped me a lot :)
    Thank you so much

  8. Azad says:

    OK hai…

  9. Myriam says:

    how can I access to the selectedvalue in code behind?
    Thanks

  10. rehana says:

    thank you… it was really helpful… but one more thing is.. if the entered text is already exists in the combo box list an alert should be showed that name already exists…. what code can be written for this??

  11. swati mishra says:

    thanks it helped a lot

  12. Manoj says:

    Can anybody help me How to create Dynamic Dropdown list eg. country -> state -> district

  13. Tejas Inamdar says:

    Thank you. Extremely well written.

  14. veena says:

    i want jsp code where i have to do the functionalities add, update and delete in the same page. I will have a list of values from the database table along with check boxes. once i select a add button say i will have to get a prompt to enter the text and that value has to be updated to database and this also should get populated in the list, similarly i should be able to delete by selecting the values and there by delete in database. Please help me with this

  15. tosif says:

    thet’s good to do

  16. ajay says:

    wowwww its gud man….:)

  17. Tsoomoo says:

    How to fix this error?
    Dynamic add item combobox
    TypeError: Cannot call method ‘add’ of null

    • super_fr says:

      Tsoomoo : the usual error here is syntax error; Javascript is case sensitive, in particular.
      Check the JS fields names (in that error, the select name, both in html and JS).

  18. dinesh says:

    i want to add a list in a combo box and i want to that list content as a option of combo box……..

  19. dinesh says:

    in html or jsp

  20. kanna says:

    Hi Viral,
    Thanks for your code.
    Could you pls help me out with an example of dependent dropdown lists.like based on the value selected in first box the choices in second box shud be decided.
    Thnks in adv

  21. Siva says:

    Simple and Clear

  22. nuthan says:

    its helps a lot tanq

  23. nuthan says:

    Successfully added options into the dropdown but the problem with ur code is and i am storing html code into databse and i used this in some other screen and showing dropdown but when i click on it ,it was not scroll down.Reply asap.

  24. dipak khalasi says:

    i am a newbie in asp programming…
    Please tell me how to add country list of the world automatically. Also i want to fill names of the states when country is selected.

    Please reply..

  25. selvamptl says:

    very use full for this code in my project

  26. Raj says:

    It was very helpful. Thank you

  27. Kapil Chandel says:

    sir i have to make a drop down list which is populated by database now i want to add a button on which clicking a new drop down list is created.
    Sir please help.
    by javascript, and php,mysql

  28. suman kumar dey says:

    i have a combo box,which has the value from database. now i have a add button, ..i want to do a task….n=button onclick i want to generate another combo box ,which have the same value from data base. means a duplicate dropdown menu…
    please help me

  29. Deep says:

    Very useful

  30. NIDISH says:

    Thanks Sir, an Excellent example helped me a lot

  31. Ashu says:

    nice work

  32. Deepak says:

    thanks for help

  33. Ali Musa says:

    This great function its working fine with all browser, But it expand/enlarg the combobox-listbox-drop-down input-text size(length), do I need to skip the 1st option.

  34. A. Srinivas Reddy says:

    thanks sir, small doubt i want insert date-picker plz help me

  35. bahman says:

    Hi Viral,
    Thanks for your code.
    Could you pls help me out with an example of dependent dropdown lists.like based on the value selected in first box the choices in second box shud be decided.
    Thnks in adv

Leave a Reply

Your email address will not be published. Required fields are marked *