Dynamic combobox-listbox-drop-down using javascript

最新推荐文章于 2021-10-11 10:51:38 发布

weistar103

最新推荐文章于 2021-10-11 10:51:38 发布

阅读量106

点赞数

分类专栏： JAVASCRIPT 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/weistar103/article/details/84435104

版权

JAVASCRIPT 专栏收录该内容

52 篇文章 0 订阅

订阅专栏

文章源自：http://viralpatel.net/blogs/dynamic-combobox-listbox-drop-down-using-javascript/

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" οnclick="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.