trigger change event in cascading dropdown

Question

I am using cascading dropdown from http://stephenwalther.com/blog/archive/2008/09/07/asp-net-mvc-tip-41-creating-cascading-dropdown-lists-with-ajax.aspx.

I need to set a value to the dropdown, and call the change event, so that the cascading dropdown doesn't looks blank for the first time.

But the change event is not calling with the tries:

            $('#Country').trigger('change');
                       or
            $('#Country').change();

How can i call the change event for this dropdown to trigger the cascading dropdown.

Answer 1

Are your dropdownlist controls server-side (asp:dropdownlist tag) or clientside (select tag)?

If they are serverside, you need it inject the client-side ID for the controls. This could be the cause for the lack of event firing.

In ASP.NET, server side controls have a different, generated clientside ID (so a DropDownList with ID "Country" will have a clientside ID of something like ct01_ct050_Country.

In these cases you can inject the clientside ID at runtime on your markup, using:

$('#<% Country.ClientID %>').change(function() {
    //code here
});

At runtime, the rendered code/markup will end up looking like:

$('#ct01_ct050_Country').change(function() {
    //code here
});

Your other option to avoid client/server IDs is to apply a unique CSS class name to the control and select by it instead:

Markup:

<asp:DropDownList ID="Country" CssClass="countryDD" runat="server" />

and jQuery:

$('select.countryDD').change(function () {
    //code here
});

This answer applies well to straight ASP.NET. I'm not sure if it is as relevant to MVC because I don't use that framework, but I'd assume it's pretty close in concept or markup vs client code.

Hope this might help...