マークアップ
<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 サービス (~/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 は自動的に設定されません。
関連するコントロールが自動的にカスケードされるように、jQuery を使用して親コントロールで変更イベントをトリガーする正しい方法は何ですか?