Dynamic combobox-listbox-drop-down using javascript
- By Viral Patel on December 9, 2008
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
Get our Articles via Email. Enter your email address.
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*°•´»?
.¸.•*(¸.•*´?`*•.¸) *•.¸
CORRECTION: How would you modify it so the combobox would also be populated with the values from a textarea??? Thanks
´*•.¸(`*•.¸?¸.•*´)¸.•*´
?«´•°*42DoubleDDs*°•´»?
.¸.•*(¸.•*´?`*•.¸) *•.¸
Too Gud..you make my life easy
Nice work! Love it!
nice
thanks
how clear data in combo box?
thanks
Very nice …………..Above example helped me a lot
Thank you so much
OK hai…
how can I access to the selectedvalue in code behind?
Thanks
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??
thanks it helped a lot
Can anybody help me How to create Dynamic Dropdown list eg. country -> state -> district
Thank you. Extremely well written.
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