Home > ASP.Net, Javascript > Add, Delete Items in DropDownList, ListBox using Javascript

Add, Delete Items in DropDownList, ListBox using Javascript


Hi All,

try this example to Add, Delete Items in DropDownList, ListBox using Javascript


<asp: DropDownList ID="DropDownList1" runat="server" Width="182px">
<asp:ListItem value="1" Text ="Approve"></asp:ListItem>
<asp:ListItem value="2" Text ="Accept"></asp:ListItem>
<asp:ListItem value="3" Text ="Test1"></asp:ListItem>
<asp:ListItem value="4" Text ="Test2"></asp:ListItem>
</asp: DropDownList>

<input type="button" value="Remove selected item" onclick="JavaScript: DeleteItem();" />
<input type="text" id="ddlText" name="ddlText" />
<input type="text" id="ddlValue" name="ddlValue" />
<input type="button" value="Add item" onclick="JavaScript: AddItem();" />
<input type="hidden" id="ddlElements" name="ddlElements" runat="server" />
<asp:Button ID="Button1" runat="server" Text="Button" />
    <script type="text/javascript">
    function DeleteItem()
    {

        var dropDownListRef = document.getElementById('<%= DropDownList1.ClientID %>');
        var optionsList = '';

        if ( dropDownListRef.value.length > 0 )
        {
            var itemIndex = dropDownListRef.selectedIndex;       if ( itemIndex >= 0 )
            dropDownListRef.remove(itemIndex);
        }
        else
        {
            alert('Please select an item');
            dropDownListRef.focus();
            dropDownListRef.select();
        }

        for (var i=0; i<dropDownListRef.options.length; i++)
        {
        var optionText = dropDownListRef.options[i].text;
        var optionValue = dropDownListRef.options[i].value;

        if ( optionsList.length > 0 )
            optionsList += ';';
            optionsList += optionText;
            optionsList += ';';
            optionsList += optionValue;
        }
        document.getElementById('<%= ddlElements.ClientID %>').value = optionsList;
    }

    function AddItem()
    {

        var dropDownListRef = document.getElementById('<%= DropDownList1.ClientID %>');
        var ddlTextRef = document.getElementById('ddlText');
        var ddlValueRef = document.getElementById('ddlValue');
        var optionsList = '';

        if ( ddlTextRef.value !="" && ddlValueRef.value!="" )
        {
            var option1 = document.createElement("option");
            option1.text= ddlValueRef.value;
            option1.value= ddlTextRef.value ;
            dropDownListRef.options.add(option1);
        }
        else
            alert('Please enter values');

        for (var i=0; i<dropDownListRef.options.length; i++)
        {

        var optionText = dropDownListRef.options[i].text;
        var optionValue = dropDownListRef.options[i].value;

        if ( optionsList.length > 0 )

            optionsList += ';';
            optionsList += optionText;
            optionsList += ';';
            optionsList += optionValue;
        }
            document.getElementById('<%= ddlElements.ClientID %>').value = optionsList;

    }

</script>

and In code behind in Page Load of Page add the following code :-


if (IsPostBack)
{
    DropDownList1.Items.Clear();
    string[] DropDownListArray = ddlElements.Value.Trim().Split(';');

    for (int i = 0; i < DropDownListArray.Length; i = i + 2)
    {
        string itemText = DropDownListArray[i];
        string itemValue = DropDownListArray[i + 1];       
 DropDownList1.Items.Add(new ListItem(itemText, itemValue));
    }

}

string optionsList = string.Empty;for (int i = 0; i < DropDownList1.Items.Count; i++)
{
   string optionText = DropDownList1.Items[i].Text;
   string optionValue = DropDownList1.Items[i].Value;

    if (optionsList.Length > 0)

    optionsList += ";";
    optionsList += optionText;
    optionsList += ';';
    optionsList += optionValue;
}

ddlElements.Value = optionsList;

Hope this helps

Good Luck

Advertisements
Categories: ASP.Net, Javascript
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: