About the author

Vijay Kodali
E-mail me Send mail

Recent comments

Authors

Disclaimer

The opinions expressed herein are my own personal opinions and do not represent my employer's view in anyway.

© Copyright 2024

Add, Delete Items in DropDownList, ListBox using Javascript

I have seen lots of questions in Asp.Net forums for adding/deleting items in drop down list or list box using JavaScript. Here is the code...

<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>

In Code behind Page_Load, add 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; 

Update:  Client-side changes to a DropDownList/ListBox are not persisted server-side, so any changes made will be lost if a PostBack occurs. Added server-side persistence to code. (Thanks to tip form NC01)

 


Tags:
Posted by vijay on Friday, December 14, 2007 9:40 PM
Permalink | Comments (0) | Post RSSRSS comment feed

Add comment


(Will show your Gravatar icon)

  Country flag

biuquote
  • Comment
  • Preview
Loading