DropQueryList SelectedIndexChange by jQuery（Cascading）

本文介绍了DropQueryList SelectedIndexChange by jQuery（Cascading）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ < 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 ％> '）。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]。 optionValue + '>' + j [i]。 optionDisplay + ' < / 选项 > ' } $（'＃<％= 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）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！