Question

I want to load data in second <select> tag (in ASP.NET) when I select an item from first <select> tag.

I have :

<table cellpadding="2" border="0">
<tr><td>Categories : <br /><select id="list_cat_for_list" runat="server" onchange="get_list" ></select><br />
<select id="list_got_links" runat="server"></select>
</td><td><asp:RequiredFieldValidator ID="RequiredFieldValidator1" ControlToValidate="list_cat_for_list" ValidationGroup="del_cat" Display="Static" runat="server" ErrorMessage="select category"></asp:RequiredFieldValidator></td></tr>
<asp:Button runat="server" ID="Button1" OnClick="delete_category_function" Text="Delete category" ValidationGroup="del_cat" />
</table>

And the code behind :

 protected void get_list( object sender, EventArgs e ) {
     BusinessLayerArcht layer = LoadDataFromBL();
     foreach ( CategoriesCtrlDto cto in layer.Categories ) {
        if ( cto.Name == list_cat_for_list.Value ) {
           foreach ( LinksCtrlDto lk in cto.Links ) {
              list_got_links.Items.Add( lk.Url );
           }
        }
     }
  }

When I change option, IE returns that get_list is undefined.

I don’t know what arguments I have to pass to C# function.
I know that onClick has object sender, EventArgs e…

Where is my mistake ?

Answer 1

You can use the ASP Drop down list to perform this aciton on the server side.

<asp:dropdown id = "id" runat="server" selectedIndexChanged="get_list"><asp:dropdownlist>

If you need to access the client side version of the control in javascript you can utilize the browser’s “view source” feature to get the ASP generated ID for the control and use that for referencing in any javascript.

If you wish to use AJAX there’s an extender in the AJAX Control Toolkit which allows you to perform the cascading drop down feature with multiple dropdowns asynchronously so you won’t have the complete postbacks going on while the user is interacting with the page.

You can download the toolkit for free from Here