Geeks With Blogs

News

Microsoft MVP


DZone MVB


Moderator at CodeASP.NET


Quiz Master







free counters
Free counters
Added on January 19,2012


Follow Me @vmsdurano

A bit About Me



Disclaimer
The opinions expressed herein are my own personal opinions and does not represent the opinions of my employers. Nor does it represent the opinion of my dog, because I don’t have one.


Vinz' Blog (ProudMonkey) "Code, Beer and Music ~ my way of being a programmer"

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:

 

 

That simple!

Technorati Tags: ,,
Posted on Tuesday, March 24, 2009 11:56 PM ASP.NET , JavaScript , Tips&Tricks | Back to top


Comments on this post: Inserting and Removing ListItems in DropDownList using JavaScript

# re: Inserting and Removing ListItems in DropDownList using JavaScript
Requesting Gravatar...
Will Dropdown maintain value across postback??

OnClick attribute will be used for C# onclick event. OnClientClick will be proper for it.
Left by Nilesh on Nov 26, 2009 5:21 PM

# re: Inserting and Removing ListItems in DropDownList using JavaScript
Requesting Gravatar...
stupid program....
Left by dasf on Jan 14, 2010 11:39 PM

# re: Inserting and Removing ListItems in DropDownList using JavaScript
Requesting Gravatar...
height of stupidity
Left by waibhav on May 18, 2010 3:51 PM

# re: Inserting and Removing ListItems in DropDownList using JavaScript
Requesting Gravatar...
This doesn't work. It throws an error that says:no such interface supported
Left by Rick on Mar 10, 2012 4:57 AM

# re: Inserting and Removing ListItems in DropDownList using JavaScript
Requesting Gravatar...
Not work in firefox
Left by Natarajan on Mar 20, 2012 10:44 PM

comments powered by Disqus

Copyright © Vincent Maverick Durano | Powered by: GeeksWithBlogs.net