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

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>

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 = "";
}

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



29 Comments

  • Doris 24 June, 2010, 0:27

    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*°•´»?
    .¸.•*(¸.•*´?`*•.¸) *•.¸

  • Doris 24 June, 2010, 0:28

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

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

  • Fatiha 20 August, 2010, 22:15

    Too Gud..you make my life easy :)

  • Techie Talks 3 November, 2010, 8:05

    Nice work! Love it!

  • keyuri 9 April, 2011, 15:54

    nice
    thanks

  • aqiqah 25 August, 2011, 6:00

    how clear data in combo box?
    thanks

  • helpquery 29 August, 2011, 11:35

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

  • Azad 9 September, 2011, 16:17

    OK hai…

  • Myriam 27 September, 2011, 17:47

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

  • rehana 29 November, 2011, 14:38

    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??

  • swati mishra 2 December, 2011, 17:07

    thanks it helped a lot

  • Manoj 15 February, 2012, 13:05

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

  • Tejas Inamdar 19 February, 2012, 22:42

    Thank you. Extremely well written.

  • veena 10 April, 2012, 18:46

    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

  • tosif 2 June, 2012, 14:23

    thet’s good to do

  • ajay 6 July, 2012, 11:37

    wowwww its gud man….:)

  • Tsoomoo 27 September, 2012, 14:32

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

    • super_fr 14 December, 2012, 5:13

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

  • dinesh 27 February, 2013, 9:11

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

  • dinesh 27 February, 2013, 9:12

    in html or jsp

  • kanna 8 May, 2013, 15:52

    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

  • Siva 10 August, 2013, 15:51

    Simple and Clear

  • nuthan 13 August, 2013, 16:04

    its helps a lot tanq

  • nuthan 13 August, 2013, 16:26

    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.

  • dipak khalasi 3 September, 2013, 18:07

    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..

  • selvamptl 8 February, 2014, 19:04

    very use full for this code in my project

  • Raj 26 February, 2014, 14:00

    It was very helpful. Thank you

  • Kapil Chandel 8 March, 2014, 14:46

    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

  • suman kumar dey 16 September, 2014, 21:50

    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

Leave a Reply

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

Note

To post source code in comment, use [code language] [/code] tag, for example:

  • [code java] Java source code here [/code]
  • [code html] HTML here [/code]

Current ye@r *