jquery's ideas and code for implementing secondary/tertiary/multi-level linkage menu_jquery

This article introduces the use of jQuery's AJAX function and asp.net to achieve the three-level linkage effect of provinces and municipalities. Other second-level, third-level or multi-level linkage can also be completed according to this method.

The data table involved in the article is City for the convenience of management.

Design this table as follows
ID: self-increasing field
City_Name: city name
City_Code: city code
We query the province and city based on the city code ,district. The city code structure is roughly as follows:
Inner Mongolia: 150000, Hohhot: 150100, Xincheng District: 150101.
Other area codes are the same, the provincial level is provincial code 0000, the city level is provincial code municipal code 00, and the region is provincial code municipal code area code.

City.ASPX code is :

Copy code The code is as follows:

< ;style type="text/css">
#dpCity{ display:none; position:relative;}
#dpArea{ display:none;position:relative;}

Province:
City:
District:

JS code:

Copy code The code is as follows:

jQuery(document).ready(function () {
var dp1 = jQuery("#dpProvince");
var dp2 = jQuery("#dpCity");
var dp3 = jQuery("#dpArea");
//Fill in province data
loadAreas("", "dpProvince");
//Bind events to the province, and fill in the city's data after the event is triggered
jQuery(dp1).bind("change keyup", function () {
var provinceID = dp1.attr("value");
loadAreas(provinceID, "dpCity");
dp2.fadeIn("slow");
});
// Bind an event to the city and fill in the data in the area after triggering the event
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("Please select");
for (i = 0; i jQuery("#" item).append(jQuery("").val(json[i].c_code).html(json[i] .c_name));
};
}
});
}

Backend code:

Copy code The code is as follows:

//实例类
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 {
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 {
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());
}
}