碼上歡樂
相關內容    簡體    繁體

jQuery實現三級聯動

本文轉載自   查看原文   2012-05-29 14:58   10716    jquery 三級聯動/ Jquery相關
本文介紹使用jQuery的AJAX功能和asp.net來實現省市區的三級聯動效果，其他二級、三級或多級聯動也可以按照此方法完成。

本文介紹使用jQuery的AJAX功能和asp.net來實現省市區的三級聯動效果，其他二級、三級或多級聯動也可以按照此方法完成。

文章中涉及到的數據表為City,為方便管理。

設計此表如下

ID：自增長字段

City_Name:城市名稱

City_Code:城市代碼

我們根據城市代碼來查詢省、市、區。城市代碼結構大致如下：

內蒙古：150000，呼和浩特：150100，新城區：150101。

其他地區代碼與此一樣，省級為省級編號+0000，市級為省級編號+市級編號+00，地區為省級編號+市級編號+地區編號。

City.ASPX代碼為：

 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head runat="server">
  4.     <title>jQuery + ASP.NET實現三級聯動</title>
  5.     <script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
  6.     <style type="text/css">
  7.         #dpCity{ display:none; position:relative;}
  8.         #dpArea{ display:none;position:relative;}
  9.     </style>
  10. </head>
  11. <body>
  12.     <div>
  13.         省：<asp:DropDownList ID="dpProvince" runat="server"></asp:DropDownList>&nbsp;&nbsp;
  14.         市：<asp:DropDownList ID="dpCity" runat="server"></asp:DropDownList>&nbsp;&nbsp;
  15.         區：<asp:DropDownList ID="dpArea" runat="server"></asp:DropDownList>
  16.     </div>
  17. </body>
  18. </html>

JS代碼：

 
  1. jQuery(document).ready(function () {
  2.             var dp1 = jQuery("#dpProvince");
  3.             var dp2 = jQuery("#dpCity");
  4.             var dp3 = jQuery("#dpArea");
  5.             //填充省的數據
  6.             loadAreas("", "dpProvince");
  7.             //給省綁定事件，觸發事件后填充市的數據
  8.             jQuery(dp1).bind("change keyup", function () {
  9.                 var provinceID = dp1.attr("value");
  10.                 loadAreas(provinceID, "dpCity");
  11.                 dp2.fadeIn("slow");
  12.             });
  13.             //給市綁定事件，觸發事件后填充區的數據
  14.             jQuery(dp2).bind("change keyup", function () {
  15.                 var cityID = dp2.attr("value");
  16.                 loadAreas(cityID, "dpArea");
  17.                 dp3.fadeIn("slow");
  18.             });
  20.         });
  21.         function loadAreas(val, item) {
  22.             jQuery.ajax({
  23.                 type: "post",
  24.                 url: "CityLoader.asmx/GetCityList",
  25.                 data: {
  26.                     code: val,
  27.                     a: Math.random()
  28.                 },
  29.                 error: function () {
  30.                     return false;
  31.                 },
  32.                 success: function (data) {
  33.                     var i;
  34.                     var json = eval(data);
  35.                     jQuery("#" + item).append("<option value='' selected='selected'>請選擇</option>");
  36.                     for (i = 0; i < json.length; i++) {
  37.                         jQuery("#" + item).append(jQuery("<option></option>").val(json[i].c_code).html(json[i].c_name));
  38.                     };
  39.                 }
  40.             });
  41.         }

后台代碼：

 
  1. //實例類
  2. public class CityModel
  3.     {
  4.         int _id;
  5.         string _cityname;
  6.         string _citycode;
  8.         public int ID
  9.         {
  10.             set { _id = value; }
  11.             get { return _id; }
  12.         }
  14.         public string CityName
  15.         {
  16.             set { _cityname = value; }
  17.             get { return _cityname; }
  18.         }
  20.         public string CityCode
  21.         {
  22.             set { _citycode = value; }
  23.             get { return _citycode; }
  24.         }
  25.     }
  27. //DAL層，返回DataTable，使用通用SqlHelper
  28. public DataTable CityList(string pcode)
  29.         {
  30.             string SQL = "SELECT * FROM city WHERE 1=1";
  31.             if (!string.IsNullOrEmpty(pcode))
  32.             {
  33.                  if (pcode.Substring(2, 2) != "00")
  34.                 {
  35.                     SQL = SQL + " AND RIGHT(citycode,2)<>'00' AND LEFT(citycode,4)=LEFT(@pcode,4)";
  36.                 }
  37.                 else
  38.                 {
  39.                     SQL = SQL + " AND RIGHT(citycode,2)='00' AND LEFT(RIGHT(citycode,4),2)<>'00' AND LEFT(citycode,2)=LEFT(@pcode,2)";
  40.                 }
  41.             }
  42.             else
  43.             {
  44.                 SQL = SQL + " AND LEFT(citycode,2)<>'00' AND RIGHT(citycode,4)='0000'";
  45.             }
  46.             SQL = SQL + " ORDER BY sorts ASC";
  47.             SqlParameter[] Param ={
  48.                 new SqlParameter("@pcode",pcode)
  49.             };
  50.             using (SqlConnection conn = new SqlConnection(DBUtility.SqlHelper.ConnectionStringLocalTransaction))
  51.             {
  52.                 DataSet ds = DBUtility.SqlHelper.ExecuteDataSet(conn, CommandType.Text, SQL, Param);
  53.                 return ds.Tables[0];
  54.             }
  55.         }
  57. //BLL層，返回City的泛型列表
  58.  public List<CityModel> CityList(string code)
  59.         {
  60.             List<CityModel> list = new List<CityModel>();
  61.            DAL. CityDAL cd = new DAL.CityDAL();
  62.             DataTable dt = cd.CityList(code);
  63.             if (dt.Rows.Count > 0)
  64.             {
  65.                 for (int i = 0; i < dt.Rows.Count; i++)
  66.                 {
  67.                     CityModel cm = new CityModel();
  68.                     cm.ID = int.Parse(dt.Rows[i]["id"].ToString());
  69.                     cm.CityName = dt.Rows[i]["cityname"].ToString();
  70.                     cm.CityCode = dt.Rows[i]["citycode"].ToString();
  71.                     list.Add(cm);
  72.                 }
  73.             }
  74.             return list;
  75.         }

CityLoader.asmx：

 
  1. /// <summary>
  2.     /// CityLoader 的摘要說明
  3.     /// </summary>
  4.     [WebService(Namespace = "http://tempuri.org/")]
  5.     [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
  6.     [System.ComponentModel.ToolboxItem(false)]
  7.     // 若要允許使用 ASP.NET AJAX 從腳本中調用此 Web 服務，請取消對下行的注釋。
  8.     // [System.Web.Script.Services.ScriptService]
  9.     public class CityLoader : System.Web.Services.WebService
  10.     {
  12.         [WebMethod]
  13.         public void GetCityList(string code)
  14.         {
  15.             CityBLL cb = new CityBLL();
  16.             StringBuilder sb = new StringBuilder();
  17.             List<CityModel> cm = cb.CityList(code);
  18.             sb.Append("[");
  19.             if (cm.Count > 0)
  20.             {
  21.                 for (int i = 0; i < cm.Count; i++)
  22.                 {
  23.                     CityModel model = cm[i];
  24.                     sb.Append("{");
  25.                     sb.AppendFormat(@"""c_name"":""{0}"",", model.CityName);
  26.                     sb.AppendFormat(@"""c_code"":""{0}""", model.CityCode);
  27.                     sb.Append("}");
  28.                     if (i < cm.Count - 1)
  29.                     {
  30.                         sb.Append(",");
  31.                     }
  32.                 }
  33.             }
  34.             sb.Append("]");
  35.             System.Web.HttpContext.Current.Response.ContentEncoding = System.Text.Encoding.GetEncoding("utf-8");
  36.             System.Web.HttpContext.Current.Response.Write(sb.ToString());
  37.         }
  39.     }


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 jQuery實現三級聯動 jQuery實現select三級聯動 jQuery實現三級聯動 簡單jquery實現select三級聯動 jquery select三級聯動 jquery json ajax三級聯動 jquery weui做的三級聯動 jQuery select三級聯動 vant實現三級聯動 用ajax實現三級聯動
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM