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...

Answer 2

For my cascading dropdowns, I use jquery on or bind

$( #Country ).on( change , function () {
  //Do stuff here

});

$( #Country ).bind( change , function () {
  //Do stuff here

});

友情链接