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.     }
posted @ 2012-05-29 14:58  PointNet  阅读(11067)  评论(0)  编辑  收藏  举报