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

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

WBOY

풀어 주다： 2016-05-16 17:38:02

원래의

1126명이 탐색했습니다.

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

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

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

City.ASPX 코드는 :

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

jQuery ASP.NET은 3단계 연결을 실현합니다
🎜>< ;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()); 
} 
} 