jquery 實現二級/三級/多級連動選單的想法及代碼_jquery

本文介紹使用jQuery的AJAX功能和asp.net來實現省市區的三級連動效果，其他二級、三級或多級連動也可以依照此方法完成。

文章中涉及到的資料表為City,為方便管理。

設計此表如下
ID：自增長欄位
City_Name:城市名稱
City_Code:城市代碼
我們根據城市代碼來查詢省、市、區。城市代碼結構大致如下：
內蒙古：150000，呼和浩特：150100，新城區：150101。
其他地區代碼與此一樣，省級為省級編號 0000，市級為省級編號 市級編號 00，地區為省級編號 市級編號 地區編號。

City.ASPX程式碼為：

複製程式碼

複製程式碼

複製程式碼

省：   市：    區：

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>"); for (i = 0; i jQuery("#" item).append(jQuery(" ").val (json[i].c_code).html(json[i].c_name)); }; } }); } 後台程式碼： 複製程式碼 程式碼如下:

//實例類別
public class CityModel
{
int _id;
字串_城市名稱;
字串_城市代碼；
public int ID
{
set { _id = value; }
get { return _id; }
}
public string CityName
{
set { _hecity = value; }
{
set { _hecity = value; } }; get { return _cityname; }
}
公共字串城市代碼
{
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(城市代碼,2)'00' AND LEFT(城市代碼,4)=LEFT(@pcode,4)";
}
else
{
SQL = SQL " AND RIGHT(citycode,2)=' 00' AND LEFT(RIGHT(citycode,4),2)'00' AND LEFT(城市代碼,2)=LEFT(@pcode,2)";
}
}
else
{
SQL = SQL " AND LEFT(citycode,2)'00' AND RIGHT(citycode,4)='0000'";
}
SQL = SQL " ORDER BY 按ASC排序";
SqlParameter[] Param ={
new SqlParameter("@pcode",pcode)
};
using (SqlConnection conn = new SqlConnection(DBUtility.SConnectionlHelaction.SConnection >{
DataSet ds = DBUtility.SqlHelper.ExecuteDataSet(conn, CommandType.Text, SQL, Param);
回傳ds.Tables[0];
}
}
//BLL層，傳回City的泛型清單
public List; CityList(字串碼)
{
List; list = new List();
達爾。 CityDAL cd = new DAL.CityDAL();
DataTable dt = cd.CityList(code);
if (dt.Rows.Count > 0)
{
for (int i = 0; i {
CityModel cm = new城市模型（）;
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);
}
}
回傳清單；
}

CityLoader.asmx：

複製程式碼


程式碼如下：


///
/// CityLoader 的摘要說明
/// / ;
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.Toolbox(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();
列表 cm = cb.CityList(代碼);
sb.Append(" [");
if (cm.Count > 0)
{
for (int i = 0; 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 {
sb.Append(",");
}

} } sb.Append("]"); System.Web.HttpContext.Current.Response .ContentEncoding = System.Text.Encoding.GetEncoding("utf-8"); System.Web.HttpContext.Current.Response.Write(sb.ToString()); } }