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

}

}

總結

以上是生活随笔為你收集整理的ajax实现多级联动菜单,jquery 实现二级/三级/多级联动菜单的思路及代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。