本文介绍使用jQuery的AJAX功能和asp.net来实现省市区的三级联动效果，其他二级、三级或多级联动也可以按照此方法完成。
文章中涉及到的数据表为City,为方便管理。
设计此表如下
ID：自增长字段
City_Name:城市名称
City_Code:城市代码
我们根据城市代码来查询省、市、区。城市代码结构大致如下：
内蒙古：150000，呼和浩特：150100，新城区：150101。
其他地区代码与此一样，省级为省级编号+0000，市级为省级编号+市级编号+00，地区为省级编号+市级编号+地区编号。
City.ASPX代码为：
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head runat="server">
- <title>jQuery + ASP.NET实现三级联动</title>
- <script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
- <style type="text/css">
- #dpCity{ display:none; position:relative;}
- #dpArea{ display:none;position:relative;}
- </style>
- </head>
- <body>
- <div>
- 省：<asp:DropDownList ID="dpProvince" runat="server"></asp:DropDownList>
- 市：<asp:DropDownList ID="dpCity" runat="server"></asp:DropDownList>
- 区：<asp:DropDownList ID="dpArea" runat="server"></asp:DropDownList>
- </div>
- </body>
- </html>
JS代码：
- jQuery(document).ready(function () {
- var dp1 = jQuery("#dpProvince");
- var dp2 = jQuery("#dpCity");
- var dp3 = jQuery("#dpArea");
- //填充省的数据
- loadAreas("", "dpProvince");
- //给省绑定事件，触发事件后填充市的数据
- jQuery(dp1).bind("change keyup", function () {
- var provinceID = dp1.attr("value");
- loadAreas(provinceID, "dpCity");
- dp2.fadeIn("slow");
- });
- //给市绑定事件，触发事件后填充区的数据
- jQuery(dp2).bind("change keyup", function () {
- var cityID = dp2.attr("value");
- loadAreas(cityID, "dpArea");
- dp3.fadeIn("slow");
- });
- });
- function loadAreas(val, item) {
- jQuery.ajax({
- type: "post",
- url: "CityLoader.asmx/GetCityList",
- data: {
- code: val,
- a: Math.random()
- },
- error: function () {
- return false;
- },
- success: function (data) {
- var i;
- var json = eval(data);
- jQuery("#" + item).append("<option value='' selected='selected'>请选择</option>");
- for (i = 0; i < json.length; i++) {
- jQuery("#" + item).append(jQuery("<option></option>").val(json[i].c_code).html(json[i].c_name));
- };
- }
- });
- }
后台代码：
- //实例类
- public class CityModel
- {
- int _id;
- string _cityname;
- string _citycode;
- public int ID
- {
- set { _id = value; }
- get { return _id; }
- }
- public string CityName
- {
- set { _cityname = value; }
- get { return _cityname; }
- }
- public string CityCode
- {
- set { _citycode = value; }
- get { return _citycode; }
- }
- }
- //DAL层，返回DataTable，使用通用SqlHelper
- public DataTable CityList(string pcode)
- {
- string SQL = "SELECT * FROM city WHERE 1=1";
- if (!string.IsNullOrEmpty(pcode))
- {
- if (pcode.Substring(2, 2) != "00")
- {
- SQL = SQL + " AND RIGHT(citycode,2)<>'00' AND LEFT(citycode,4)=LEFT(@pcode,4)";
- }
- else
- {
- SQL = SQL + " AND RIGHT(citycode,2)='00' AND LEFT(RIGHT(citycode,4),2)<>'00' AND LEFT(citycode,2)=LEFT(@pcode,2)";
- }
- }
- else
- {
- SQL = SQL + " AND LEFT(citycode,2)<>'00' AND RIGHT(citycode,4)='0000'";
- }
- SQL = SQL + " ORDER BY sorts ASC";
- SqlParameter[] Param ={
- new SqlParameter("@pcode",pcode)
- };
- using (SqlConnection conn = new SqlConnection(DBUtility.SqlHelper.ConnectionStringLocalTransaction))
- {
- DataSet ds = DBUtility.SqlHelper.ExecuteDataSet(conn, CommandType.Text, SQL, Param);
- return ds.Tables[0];
- }
- }
- //BLL层，返回City的泛型列表
- public List<CityModel> CityList(string code)
- {
- List<CityModel> list = new List<CityModel>();
- DAL. CityDAL cd = new DAL.CityDAL();
- DataTable dt = cd.CityList(code);
- if (dt.Rows.Count > 0)
- {
- for (int i = 0; i < dt.Rows.Count; i++)
- {
- CityModel cm = new CityModel();
- cm.ID = int.Parse(dt.Rows[i]["id"].ToString());
- cm.CityName = dt.Rows[i]["cityname"].ToString();
- cm.CityCode = dt.Rows[i]["citycode"].ToString();
- list.Add(cm);
- }
- }
- return list;
- }
CityLoader.asmx：
- /// <summary>
- /// CityLoader 的摘要说明
- /// </summary>
- [WebService(Namespace = "http://tempuri.org/")]
- [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
- [System.ComponentModel.ToolboxItem(false)]
- // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。
- // [System.Web.Script.Services.ScriptService]
- public class CityLoader : System.Web.Services.WebService
- {
- [WebMethod]
- public void GetCityList(string code)
- {
- CityBLL cb = new CityBLL();
- StringBuilder sb = new StringBuilder();
- List<CityModel> cm = cb.CityList(code);
- sb.Append("[");
- if (cm.Count > 0)
- {
- for (int i = 0; i < cm.Count; i++)
- {
- CityModel model = cm[i];
- sb.Append("{");
- sb.AppendFormat(@"""c_name"":""{0}"",", model.CityName);
- sb.AppendFormat(@"""c_code"":""{0}""", model.CityCode);
- sb.Append("}");
- if (i < cm.Count - 1)
- {
- sb.Append(",");
- }
- }
- }
- sb.Append("]");
- System.Web.HttpContext.Current.Response.ContentEncoding = System.Text.Encoding.GetEncoding("utf-8");
- System.Web.HttpContext.Current.Response.Write(sb.ToString());
- }
- }