Inserting and Removing ListItems in DropDownList using JavaScript

This demo shows on how to dynamically adding /removing ListItems in the ASP.NET DropDownList control using JavaScript.

Here’s the mark up and the JavaScript code block below:

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
    <title>Dynamic DropDownList</title>
    <script type="text/javascript" language="javascript">
    function AddItemInList()
    {
        var list =  document.getElementById('DropDownList1');
        var box =  document.getElementById('Text1');
        var newListItem = document.createElement('OPTION');

        newListItem.text = box.value;
        newListItem.value = box.value;
        list.add(newListItem);

        box.value = "";
        box.focus();  
    }

    function RemoveItemInList()
    {

        var list  = document.getElementById('DropDownList1');
        if(list.options.length > 0)
        {
            for(var i = list.options.length - 1; i >= 0; i--)
            {
                if(list.options[i].selected)
                {
                    list.remove(i);
                    return false;
                }
            }
        }
        else
        {
            alert('Unable to remove. List is Empty!');
        }     
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:DropDownList ID="DropDownList1" runat="server">
        </asp:DropDownList>
        <input id="Text1" type="text" />
        <input id="Button1" type="button" value="Add New"  onclick="AddItemInList();"/>
        <input id="Button2" type="button" value="Remove Item"  onclick="return RemoveItemInList();"/>
    </div>
    </form>
</body>
</html>

AddItemInList() function adds a new ListItem into the DropDownList based from the values entered from the TextBox Control. Clicking the Add New Button will automatically populate the DropDownList with the newly added ListItem.

RemoveItemInList() function remove's the Selected ListItem from the DropDownList control.

Here’s the sample page out put below: