2차/3차/다단계 연계 구현을 위한 jquery의 아이디어와 코드 menu_jquery

이 기사에서는 jQuery의 AJAX 기능과 asp.net을 사용하여 지방자치단체의 3단계 연결 효과를 구현하는 방법을 소개합니다. 다른 2단계, 3단계 또는 다단계 연결도 이 방법에 따라 완료할 수 있습니다.

관리의 편의를 위해 기사에 포함된 데이터 테이블은 City 입니다.

이 테이블을 다음과 같이 디자인합니다
ID: self-increasing field
City_Name: 도시 이름
City_Code: 도시 코드
지방 및 도시 기반으로 쿼리합니다. 도시 코드, 지구에. 도시 코드 구조는 대략 다음과 같습니다.
내몽골: 150000, 후허하오터: 150100, 신성구: 150101.
다른 지역번호는 동일하며, 지방번호는 지방번호 0000, 시 수준은 지방번호 지방번호 00, 지역은 지방번호 지방번호 지역번호입니다.

City.ASPX 코드는 :

코드 복사 코드는 다음과 같습니다.

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

지방:/asp :DropDownList>
도시:
지구:

JS 코드
:

코드 복사 코드는 다음과 같습니다.

jQuery(document).ready (함수 () {

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()
},
오류: 함수() {
return false
},
성공: 함수(데이터) {
var i;
var json = eval(data);
jQuery("#" 항목).append("선택하세요") ;
for (i = 0; i < json .length; i ) {
jQuery("#" item).append(jQuery("").val( json[i].c_code).html(json[i] .c_name));
}
})



백엔드 코드
:

코드 복사

코드는 다음과 같습니다.

//实例类
공개 클래스 CityModel
{
int _id;
문자열 _도시명;
문자열 _citycode;
공개 정수 ID
{
set { _id = value; }
get { return _id; }
}
공개 문자열 CityName
{
set { _cityname = value; }
get { return _cityname; }
}
공개 문자열 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( 도시 코드,2)'00' AND LEFT(도시 코드,4)=LEFT(@pcode,4)";
}
else
{
SQL = SQL " AND RIGHT(도시 코드,2)='00' AND LEFT(RIGHT(도시 코드,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)
};
(SqlConnection conn = new SqlConnection(DBUtility.SqlHelper.ConnectionStringLocalTransaction)) 사용
{
DataSet ds = DBUtility.SqlHelper.ExecuteDataSet(conn, CommandType.Text, SQL, Param);
ds.Tables[0]을 반환합니다.
}
}
//BLL层，返回City的泛型列表
공개 목록 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 < dt.Rows.Count; 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();
목록.추가(cm);
}
}
반품 목록;
}

CityLoader.asmx：

复代码 代码如下:

/// <요약>
/// CityLoader 的摘要说明
///
[WebService(네임스페이스 = "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(문자열 코드)
{
CityBLL cb = new CityBLL();
StringBuilder sb = new StringBuilder();
목록 cm = cb.CityList(코드);
sb.Append("[");
if (cm.Count > 0)
{
for (int i = 0; i {
CityModel 모델 = 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());
}
}