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)