Correct Way to Programatically Trigger Change Event of ASP.net CascadingDropDown using JavaScript

Question

Markup

<asp:ScriptManager runat="server" />
Country Code
<asp:TextBox ID="CoutryCodeTextBox" runat="server" onblur="selectCountry(this.id);">
</asp:TextBox>

<asp:DropDownList ID="CountryDropDownList" runat="server">
</asp:DropDownList>

<ajaxToolkit:CascadingDropDown
    ID="CountryDropDownListCascadingDropDown" runat="server"
    TargetControlID="CountryDropDownList"
    Category="Country"
    ServiceMethod="GetCountries"
    ServicePath="~/CountryData.asmx"
    LoadingText="Loading ..."
    PromptText="SELECT">
</ajaxToolkit:CascadingDropDown>


<asp:DropDownList ID="CityDropDownList" runat="server">
</asp:DropDownList>
<ajaxToolkit:CascadingDropDown
    ID="CityDropDownListCascadingDropDown" runat="server"
    ParentControlID="CountryDropDownList"
    TargetControlID="CityDropDownList"
    Category="City" ServiceMethod="GetCities"
    ServicePath="~/CountryData.asmx"
    LoadingText="Loading ..."
    PromptText="SELECT">
</ajaxToolkit:CascadingDropDown>

Web Service (~/CountryData.asmx)

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
[ScriptService]
public class CountryData : System.Web.Services.WebService
{
    [WebMethod]
    public CascadingDropDownNameValue[] GetCountries(string knownCategoryValues, string category)
    {
        List<CascadingDropDownNameValue> values = new List<CascadingDropDownNameValue>();

        values.Add(new CascadingDropDownNameValue("United States", "US"));
        values.Add(new CascadingDropDownNameValue("Canada", "CA"));

        return values.ToArray();
    }

    [WebMethod]
    public CascadingDropDownNameValue[] GetCities(string knownCategoryValues, string category)
    {
        StringDictionary kv = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);
        string country = kv["Country"];

        List<CascadingDropDownNameValue> values = new List<CascadingDropDownNameValue>();

        switch (country)
        { 
            case "US":
                values.Add(new CascadingDropDownNameValue("California", "CA"));
                values.Add(new CascadingDropDownNameValue("New York", "NY"));
                break;
            case "CA":
                values.Add(new CascadingDropDownNameValue("Toronto", "TO"));
                values.Add(new CascadingDropDownNameValue("Montreal", "MO"));
                break;
        }

        return values.ToArray();
    }

}

jQuery

    var selectCountry = function (id)
    {
        var countryCodeTextBox = $("#" + id);
        var countryDropDownList = $("#CountryDropDownList");

        countryDropDownList.val(countryCodeTextBox.val());
        countryDropDownList.change();
    }

The javascript function changes the selected value of CountryDropDownList. However, the cascaded control CityDropDownList is not populated automatically.

What is the correct way to trigger the change event in the parent control using jQuery so that the related control(s) are cascaded automatically?

Does it trigger when you use the method here: http://stackoverflow.com/questions/499405/change-the-selected-value-of-a-drop-down-list-with-jquery — Garrison Neely, Jul 19 '13 at 20:36

score 4 · Accepted Answer · edited May 23 '17 at 11:57

According to you, my answer on How can I trigger an onchange event manually? also solves your problem:

There's a couple of ways you can do this. If the onchange listener is a function set via the element.onchange property and you're not bothered about the event object or bubbling/propagation, the easiest method is to just call that function:
element.onchange();
If you need it to simulate the real event in full, or if you set the event via the html attribute or addEventListener/attachEvent, you need to do a bit of feature detection to correctly fire the event:
if ("createEvent" in document) {
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent("change", false, true);
    element.dispatchEvent(evt);
}
else
    element.fireEvent("onchange");

You're a rockstar Andy. :D – Nick Binnet Jul 24 '13 at 16:39 — Nick Binnet, Jul 24 '13 at 16:39
IMHO, this should be implemented by jQuery. – Nick Binnet Aug 01 '13 at 17:59 — Nick Binnet, Aug 01 '13 at 17:59

Correct Way to Programatically Trigger Change Event of ASP.net CascadingDropDown using JavaScript

1 Answers1

Linked