使用 JavaScript 以编程方式触发 ASP.net CascadingDropDown 的更改事件的正确方法 [英] Correct Way to Programatically Trigger Change Event of ASP.net CascadingDropDown using JavaScript

问题描述

标记

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

网络服务 (~/CountryData.asmx)

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();
    }

javascript 函数更改 CountryDropDownList 的选定值.但是，级联控件 CityDropDownList 不会自动填充.

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

使用 jQuery 在父控件中触发更改事件以便相关控件自动级联的正确方法是什么?

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?

推荐答案

根据你的说法，我对如何触发 onchange 的回答手动事件?也可以解决您的问题:

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

有几种方法可以做到这一点.如果 onchange 监听器是通过 element.onchange 属性设置的函数，而您不是关心事件对象或冒泡/传播，最简单的方法是调用该函数:

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

如果您需要它来完全模拟真实事件，或者如果您设置事件通过 html 属性或 addEventListener/attachEvent，你需要做一些特征检测才能正确触发事件:

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

这篇关于使用 JavaScript 以编程方式触发 ASP.net CascadingDropDown 的更改事件的正确方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！