本文介紹使用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());
}
}