Dynamic combobox-listbox-drop-down using javascript

By Viral Patel on December 9, 2008
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.