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.

Tech Pedia

Thursday 1 December 2011

Dynamic Listbox using JavaScript

Dynamic combobox-listbox-drop-down using javascript

No comments:

Post a Comment