DropQueryList SelectedIndexChange by jQuery（Cascading） [英] DropdownList SelectedIndexChange by jQuery (Cascading)
本文介绍了DropQueryList SelectedIndexChange by jQuery（Cascading）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
< asp：Content ID =Content1ContentPlaceHolderID =headrunat =server>
< script src =Scripts / jquery-1。 8 。 2 .js> < / script >
< script type =text / javascript>
$（function（）{
$（'＃<％= ddlState。 ClientID ％ > '）。attr（'禁用'，'禁用'）;
$（'＃<％= ddlRegion。 ClientID < span class =code-pagedirective>％> '）。attr（'disabled'，'disabled'）;
$（'＃<％= ddlState。 ClientID ％> '）。append（'< option selected =selectedvalue =0>选择状态 < / 选项 > '）;
$（'＃<％= ddlRegion。 ClientID ％> '）。empty（）。append（'< option selected =selectedvalue =0>选择 Region < / 选项 > '）;
$（'＃<％= ddlCountry。 ClientID ％> '）。更改（function（）{
var country = $（'＃<％= ddlCountry。 ClientID ％> '）。val（）
$（'＃<％= ddlState。 ClientID ％> '）。removeAttr（disabled）;
$（ '＃<％= ddlRegion。 ClientID ％> '）。empty（）。append（' < option selected =selectedvalue =0>选择区域 < / 选项 > '）;
$（'＃<％= ddlRegion。 ClientID ％> ; '）。attr（'禁用'，'禁用'）;
$ .ajax（{
type ： POST，
url：Demo2.aspx / BindStates，
data：{'country'：'+ country +'} ，
contentType ： application / json; charset = utf-8，
dataType ： json，
成功：函数（msg）{
var j = jQuery.parseJSON（msg.d）;
var options;
for （var i = 0; i < j .length; i ++）{
选项s + ='< 选项 value =' + j [i]。< span class =code-leadattribute> optionValue + '>' + j [i]。 optionDisplay + ' < span class =code-keyword>< / 选项 > '
}
$（'＃<％= ddlState。 ClientID ％> '）。html（options）
} ，
错误： function （数据）{
alert（'东西我们nt 错了'）
}
}）;
}）;
$（'＃<％= ddlState。 ClientID ％> '）。 （function（）{
var stateid = $（'＃<％= ddlState。 ClientID ％> '）。val（）
$（'＃<％= ddlRegion。 ClientID ％> '）。removeAttr（disabled）;
$ .ajax（{
type ： POST，
url：Demo2.aspx / BindRegion，
data：{'state'：'+ stateid +'} ，
contentType ： application / json; charset = utf-8，
dataType ： json，
成功：函数（msg）{
var j = jQuery.parseJSON（msg.d）;
var options;
for （var i = 0; i < j .length; i ++）{
options + ='< ; 选项 value =' + j [i]。 optionValue + '>' + j [i]。 optionDisplay + ' < / 选项 > '
}
$（'＃<％= ddlRegion。 ClientID ％> '）。html（options）
} ，
错误： 功能（数据）{
alert（'Something Went 错'）
}
}）;
}）
}）
< / script >
< / asp：Content >
< asp：Content ID =Content2ContentPlaceHolderID =Maincontent runat =server>
< center>
< table style =width：100％>
< tr>
< td colspan =2class =tdHeader1>
级联
< / td >
< / tr >
< tr>
< td class =label>
状态 ：
< / td >
< td class =labelDescription>
< asp：DropDownList ID =ddlCountryrunat =server> < / asp：DropDownList >
< ; / td >
< / tr >
< tr>
< td class =label>
区 ：
< / td >
< td class =labelDescription>
< asp：DropDownList ID =ddlStaterunat =server> < ; / asp：DropDownList >
< / td >
< / tr >
< tr> ;
< td class =label>
城市 ：
< / td >
< td class =labelDescription>
< asp：DropDownList ID =ddlRegionrunat =server> < / asp：DropDownList >
< ; / td >
< / tr >
< tr>
< td class =label> < / td >
< td class = labelDescription> < / td >
< / tr >
< / table >
< / center >
< / asp：内容 >
========= ================================================== =================
public partial class Demo2：System.Web.UI.Page
{
// public static string strcon =Data Source = OTMUMHODTN004 / SA; Initial Catalog = INDIACAST;用户ID = sa;密码= saadmin @ 123;集成安全性= true;
public static string strcon = ConfigurationManager.ConnectionStrings [ Indiacastcms]的ConnectionString。
#region Page_Load
protected void Page_Load（ object sender，EventArgs e）
{
if （！IsPostBack）
{
BindCountries（）;
}
}
#endregion
#region BindCountries（）
public void BindCountries（）
{
// String strQuery =select CountryID，CountryName from MasterCountry;
// using（SqlConnection con = new SqlConnection（strcon））
// {
// 使用（SqlCommand cmd = new SqlCommand（））
// {
// cmd.CommandType = CommandType.Text;
// cmd.CommandText = strQuery;
// cmd.Connection = con;
// con.Open（）;
// ddlCountry.DataSource = cmd.ExecuteReader（）;
// ddlCountry.DataTextField =CountryName;
// ddlCountry.DataValueField =CountryID;
// ddlCountry.DataBind（）;
// ddlCountry.Items.Insert（0，new ListItem（<< - Select Country - >>，0））;
// con.Close（）;
// }
// }
尝试
{
strSel = 从MasterCountry中选择CountryID，CountryName;
ds = common.ExecuteDataSet（strSel，CommandType.Text）;
if （ds.Tables [ 0 ]。Rows.Count > 0 ）
{
ddlCountry.DataSource = ds.Tables [ 0 ];
ddlCountry.DataValueField = CountryID;
ddlCountry.DataTextField = CountryName;
ddlCountry.DataBind（）;
ddlCountry.Items.Insert（ 0 ， << - 选择国家/地区 - >>）;
}
}
catch （例外情况）
{
抛出 ex;
}
}
#endregion
#region [WebMethod] BindStates（字符串国家/地区）
[WebMethod]
public static string BindStates（ string country）
{
StringWriter builder = new StringWriter（）;
字符串 strQuery = 选择StateID，StateName来自MasterState，其中CountryID = @ CountryID;
DataSet ds = new DataSet（）;
使用（SqlConnection con = new SqlConnection（strcon））
{
使用（SqlCommand cmd = new SqlCommand（））
{
cmd .CommandType = CommandType.Text;
cmd.CommandText = strQuery;
cmd.Parameters.AddWithValue（ @ countryid，country）;
cmd.Connection = con;
con.Open（）;
SqlDataAdapter da = new SqlDataAdapter（cmd）;
da.Fill（ds）;
con.Close（）;
}
}
DataTable dt = ds.Tables [ 0 ];
builder.WriteLine（ [）;
if （dt.Rows.Count > 0 ）
{
builder.WriteLine（ {\optionDisplay \：\<< - 选择州 - >> \，）;
builder.WriteLine（ \optionValue \：\0 \}， ）;
for （ int i = 0 ; i < = dt.Rows.Count - 1 ; i ++）
{
builder.WriteLine（ {\optionDisplay \：\ + dt.Rows [i] [ StateName] + \，）;
builder.WriteLine（ \optionValue \：\ + dt.Rows [i] [ StateID] + \}，）;
}
}
else
{
builder.WriteLine（ {\optionDisplay \：\ - 选择状态 - \，）;
builder.WriteLine（ \optionValue \：\0 \}， ）;
}
string returnjson = builder.ToString（）。Substring（ 0 ， builder.ToString（）。长度 - 3 ）;
returnjson = returnjson + ];
return returnjson.Replace（ \ r， ）。替换（ \ n， ）;
}
#endregion
#region [WebMethod] BindRegion（字符串状态）
[WebMethod]
public static string BindRegion（ string state）
{
StringWriter builder = new StringWriter（）;
字符串 strQuery = 选择RegionID，RegionName来自MasterRegion，其中StateID = @ StateID;
DataSet ds = new DataSet（）;
使用（SqlConnection con = new SqlConnection（strcon））
{
使用（SqlCommand cmd = new SqlCommand（））
{
cmd .CommandType = CommandType.Text;
cmd.CommandText = strQuery;
cmd.Parameters.AddWithValue（ @ StateID，state）;
cmd.Connection = con;
con.Open（）;
SqlDataAdapter da = new SqlDataAdapter（cmd）;
da.Fill（ds）;
con.Close（）;
}
}
DataTable dt = ds.Tables [ 0 ];
builder.WriteLine（ [）;
if （dt.Rows.Count > 0 ）
{
builder.WriteLine（ {\optionDisplay \：\<< - 选择地区 - >> \，）;
builder.WriteLine（ \optionValue \：\0 \}， ）;
for （ int i = 0 ; i < = dt.Rows.Count - 1 ; i ++）
{
builder.WriteLine（ {\optionDisplay \：\ + dt.Rows [i] [ RegionName] + \，）;
builder.WriteLine（ \optionValue \：\ + dt.Rows [i] [ RegionID] + \}，）;
}
}
else
{
builder.WriteLine（ {\optionDisplay \：\ - 选择地区 - \，）;
builder.WriteLine（ \optionValue \：\0 \}， ）;
}
string returnjson = builder.ToString（）。Substring（ 0 ， builder.ToString（）。长度 - 3 ）;
returnjson = returnjson + ];
return returnjson.Replace（ \ r， ）。替换（ \ n， ）;
}
#endregion
}
}
解决方案
（function（）{
（'＃<％= ddlState。 ClientID ％> '）。attr（'disabled'，'disabled'）;
（'＃< ％= ddlRegion。 ClientID ％> '）。attr（'disabled'，'disabled'）;
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script src="Scripts/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function () {
$('#<%=ddlState.ClientID %>').attr('disabled', 'disabled');
$('#<%=ddlRegion.ClientID %>').attr('disabled', 'disabled');
$('#<%=ddlState.ClientID %>').append('<option selected="selected" value="0">Select State</option>');
$('#<%=ddlRegion.ClientID %>').empty().append('<option selected="selected" value="0">Select Region</option>');
$('#<%=ddlCountry.ClientID %>').change(function () {
var country = $('#<%=ddlCountry.ClientID%>').val()
$('#<%=ddlState.ClientID %>').removeAttr("disabled");
$('#<%=ddlRegion.ClientID %>').empty().append('<option selected="selected" value="0">Select Region</option>');
$('#<%=ddlRegion.ClientID %>').attr('disabled', 'disabled');
$.ajax({
type: "POST",
url: "Demo2.aspx/BindStates",
data: "{'country':'" + country + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
var j = jQuery.parseJSON(msg.d);
var options;
for (var i = 0; i < j.length; i++) {
options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>'
}
$('#<%=ddlState.ClientID %>').html(options)
},
error: function (data) {
alert('Something Went Wrong')
}
});
});
$('#<%=ddlState.ClientID %>').change(function () {
var stateid = $('#<%=ddlState.ClientID%>').val()
$('#<%=ddlRegion.ClientID %>').removeAttr("disabled");
$.ajax({
type: "POST",
url: "Demo2.aspx/BindRegion",
data: "{'state':'" + stateid + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
var j = jQuery.parseJSON(msg.d);
var options;
for (var i = 0; i < j.length; i++) {
options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>'
}
$('#<%=ddlRegion.ClientID %>').html(options)
},
error: function (data) {
alert('Something Went Wrong')
}
});
})
})
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="Maincontent" runat="server">
<center>
<table style="width:100%">
<tr>
<td colspan="2" class="tdHeader1">
Cascade
</td>
</tr>
<tr>
<td class="label">
State :
</td>
<td class="labelDescription">
<asp:DropDownList ID="ddlCountry" runat="server"></asp:DropDownList>
</td>
</tr>
<tr>
<td class="label">
District :
</td>
<td class="labelDescription">
<asp:DropDownList ID="ddlState" runat="server"></asp:DropDownList>
</td>
</tr>
<tr>
<td class="label">
City :
</td>
<td class="labelDescription">
<asp:DropDownList ID="ddlRegion" runat="server"></asp:DropDownList>
</td>
</tr>
<tr>
<td class="label"></td>
<td class="labelDescription"></td>
</tr>
</table>
</center>
</asp:Content>
============================================================================
public partial class Demo2 : System.Web.UI.Page
{
//public static string strcon = "Data Source=OTMUMHODTN004/SA;Initial Catalog=INDIACAST;User ID=sa;Password=saadmin@123;Integrated Security=true";
public static string strcon = ConfigurationManager.ConnectionStrings["Indiacastcms"].ConnectionString;
#region Page_Load
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindCountries();
}
}
#endregion
#region BindCountries()
public void BindCountries()
{
//String strQuery = "select CountryID,CountryName from MasterCountry";
//using (SqlConnection con = new SqlConnection(strcon))
//{
// using (SqlCommand cmd = new SqlCommand())
// {
// cmd.CommandType = CommandType.Text;
// cmd.CommandText = strQuery;
// cmd.Connection = con;
// con.Open();
// ddlCountry.DataSource = cmd.ExecuteReader();
// ddlCountry.DataTextField = "CountryName";
// ddlCountry.DataValueField = "CountryID";
// ddlCountry.DataBind();
// ddlCountry.Items.Insert(0, new ListItem("<<--Select Country-->>", "0"));
// con.Close();
// }
//}
try
{
strSel = "select CountryID,CountryName from MasterCountry";
ds = common.ExecuteDataSet(strSel,CommandType.Text);
if(ds.Tables[0].Rows.Count > 0)
{
ddlCountry.DataSource=ds.Tables[0];
ddlCountry.DataValueField = "CountryID";
ddlCountry.DataTextField = "CountryName";
ddlCountry.DataBind();
ddlCountry.Items.Insert(0,"<<--Select Country-->>");
}
}
catch (Exception ex)
{
throw ex;
}
}
#endregion
#region [WebMethod] BindStates(string country)
[WebMethod]
public static string BindStates(string country)
{
StringWriter builder = new StringWriter();
String strQuery = "select StateID,StateName from MasterState where CountryID=@CountryID";
DataSet ds = new DataSet();
using (SqlConnection con = new SqlConnection(strcon))
{
using (SqlCommand cmd = new SqlCommand())
{
cmd.CommandType = CommandType.Text;
cmd.CommandText = strQuery;
cmd.Parameters.AddWithValue("@countryid", country);
cmd.Connection = con;
con.Open();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(ds);
con.Close();
}
}
DataTable dt = ds.Tables[0];
builder.WriteLine("[");
if (dt.Rows.Count > 0)
{
builder.WriteLine("{\"optionDisplay\":\"<<--Select State-->>\",");
builder.WriteLine("\"optionValue\":\"0\"},");
for (int i = 0; i <= dt.Rows.Count - 1; i++)
{
builder.WriteLine("{\"optionDisplay\":\"" + dt.Rows[i]["StateName"] + "\",");
builder.WriteLine("\"optionValue\":\"" + dt.Rows[i]["StateID"] + "\"},");
}
}
else
{
builder.WriteLine("{\"optionDisplay\":\"--Select State--\",");
builder.WriteLine("\"optionValue\":\"0\"},");
}
string returnjson = builder.ToString().Substring(0, builder.ToString().Length - 3);
returnjson = returnjson + "]";
return returnjson.Replace("\r", "").Replace("\n", "");
}
#endregion
#region [WebMethod] BindRegion(string state)
[WebMethod]
public static string BindRegion(string state)
{
StringWriter builder = new StringWriter();
String strQuery = "select RegionID, RegionName from MasterRegion where StateID=@StateID";
DataSet ds = new DataSet();
using (SqlConnection con = new SqlConnection(strcon))
{
using (SqlCommand cmd = new SqlCommand())
{
cmd.CommandType = CommandType.Text;
cmd.CommandText = strQuery;
cmd.Parameters.AddWithValue("@StateID", state);
cmd.Connection = con;
con.Open();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(ds);
con.Close();
}
}
DataTable dt = ds.Tables[0];
builder.WriteLine("[");
if (dt.Rows.Count > 0)
{
builder.WriteLine("{\"optionDisplay\":\"<<--Select Region-->>\",");
builder.WriteLine("\"optionValue\":\"0\"},");
for (int i = 0; i <= dt.Rows.Count - 1; i++)
{
builder.WriteLine("{\"optionDisplay\":\"" + dt.Rows[i]["RegionName"] + "\",");
builder.WriteLine("\"optionValue\":\"" + dt.Rows[i]["RegionID"] + "\"},");
}
}
else
{
builder.WriteLine("{\"optionDisplay\":\"--Select Region--\",");
builder.WriteLine("\"optionValue\":\"0\"},");
}
string returnjson = builder.ToString().Substring(0, builder.ToString().Length - 3);
returnjson = returnjson + "]";
return returnjson.Replace("\r", "").Replace("\n", "");
}
#endregion
}
} 解决方案
(function () {
('#<%=ddlState.ClientID %>').attr('disabled', 'disabled');
('#<%=ddlRegion.ClientID %>').attr('disabled', 'disabled');
这篇关于DropQueryList SelectedIndexChange by jQuery（Cascading）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
