jquery 实现二级/三级/多级联动菜单的思路及代码

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