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

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?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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");

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0