jQuery Change Value of ASP.NET AJAX CascadingDropDown

Question

I can use jQuery to change the value of a CascadingDropDown, but the event that fires which causes the target control's child dropdown to populate with data never happens:

$("#<%= ddlFromCompetition.ClientID %>").change(function() {
  var fromValue = $("#<%= ddlFromCompetition.ClientID %>").val();
  $("#<%= ddlToCompetition.ClientID %>").val(fromValue); // causes value to change, but child doesn't update
});

To be clear, ddlFromCompetition and ddlToCompetition are not parent/child. It's the child of ddlToCompetition that does not update using the above code. When selecting ddlToCompetition using the mouse, its child dropdown updates as expected.

I've tried calling $("#<%= ddlToCompetition.ClientID %>").change() to try to force the event to fire, but it doesn't work.

Answer 1

You need the trigger() event

$("#<%= ddlToCompetition.ClientID %>").trigger('change');

JQuery docs: http://api.jquery.com/trigger/

Also, because the first change event handler for ddlFromCompetition fires in the context of ddlFromCompetition, you should be able to change...

var fromValue = $("#<%= ddlFromCompetition.ClientID %>").val();

to...

var fromValue = $(this).val();