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

本文介绍使用jquery的AJAX功能和asp.net来实现省市区的三级联动效果，其他二级、三级或多级联动也可以按照此方法完成。

文章中涉及到的数据表为City,为方便管理。

设计此表如下

ID：自增长字段

City_Name:城市名称

City_Code:城市代码

我们根据城市代码来查询省、市、区。城市代码结构大致如下：

内蒙古：150000，呼和浩特：150100，新城区：150101。

其他地区代码与此一样，省级为省级编号+0000，市级为省级编号+市级编号+00，地区为省级编号+市级编号+地区编号。

City.ASPX代码为：

复制代码 代码如下:

jQuery + ASP.NET实现三级联动

#dpCity{ display:none; position:relative;}

#dpArea{ display:none;position:relative;}

省：

市：

区：

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("请选择");

for (i = 0; i < json.length; i++) {

jQuery("#" + item).append(jQuery("").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 CityList(string code)

{

List list = new List();

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：

复制代码 代码如下:

///

/// CityLoader 的摘要说明

///

[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 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());

}

}