I believe that your problem is that when you add an item to a DropDownList client-side (using JavaScript) that when a PostBack occurs, the item will disappear. The only way around this is to add a hidden server-control to the page and when adding the item client-side, add it to the hidden server-control also, so that when a PostBack occurs you can also add it server-side.
Here's an example.
aspx file:
<form id="Form1" method="post" runat="server">
<asp:DropDownList id="DropDownList1" runat="server">
<asp:listitem value="1">Item 1</asp:listitem>
<asp:listitem value="2">Item 2</asp:listitem>
<asp:listitem value="3">Item 3</asp:listitem>
<asp:listitem value="4">Item 4</asp:listitem>
<asp:listitem value="5">Item 5</asp:listitem>
<asp:listitem value="6">Item 6</asp:listitem>
</asp:DropDownList>
<input id="DropDownList1NewItems" type="hidden" name="DropDownList1NewItems" runat="server">
<input type="button" onclick="addItem();" value="Add Item">
</form>
<script type="text/javascript">
<!--
function addItem()
{
// Add the item here...
var ddlRef = document.getElementById('<%= DropDownList1.ClientID %>');
var newOption = window.document.createElement('OPTION');
newOption.text = 'SomeNewItem';
newOption.value = 'SomeNewItem';
ddlRef.options.add(newOption);
var hiddenElementRef = document.getElementById('<%= DropDownList1NewItems.ClientID %>');
if ( hiddenElementRef.value.length > 0 )
hiddenElementRef.value += ';';
hiddenElementRef.value += 'SomeNewItem';
}
// -->
</script>
aspx.cs file:
private void Page_Load(object sender, System.EventArgs e)
{
if ( this.IsPostBack )
{
if ( DropDownList1NewItems.Value.Length > 0 )
{
string [] newItemsArray = DropDownList1NewItems.Value.Split(';');
for (int i=0; i<newItemsArray.Length; i++)
{
string newItem = newItemsArray[i];
DropDownList1.Items.Add(new ListItem(newItem, newItem));
}
DropDownList1NewItems.Value = string.Empty;
}
}
}
NC...