Question

I’ve an HTML select control in my ASP.NET page and I made it as runat = "server" and now I tried to add some list items to it dynamically. Something like below code

var list = document.getElementById('<%=list1.ClientID%>');
var newListItem = document.createElement('OPTION');
newListItem.text = "Emp1";
newListItem.value = "e101";
list.add(newListItem);    

<asp:Panel ID="pnlemp" runat="server" 
    Style="display: none;" 
    CssClass="modalPopup" 
    width="700px" Height="350px">
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
           <ContentTemplate>
               <select id="list1" multiple="true"  name="list1" runat="server">
               </select>
           </ContentTemplate>
       </asp:UpdatePanel>
</asp:Panel>
                       

and now when I try to access this from my code like list1.Items.Count it is showing 0.

Anything wrong in this?

Answer 1

For solution to this problem either add items dynamically through server side code or
dont bring server side into the picture and handle everything via javascript.

Items added via javascript will not be persisted by asp.net. further more you may recieve a “Invalid Callback or PostBack Argument” Exception for the same because it will not understand from where these listitems(options) have been added in the Select.