jQuery+Asp.Net实现省市二级联动功能

*{margin:0; padding:0;}

body{font-size:12px; font-family:Arial @宋体;}

$(document).ready(function() {

//加载完成后绑定省份数据

$.getJSON("Default.aspx",function(data) {//data的数据格式[{"text":"北京","value":"0001"},{"text":"江西","value":"0031"}]

//alert(data[0].text+"|"+data[0].value);

$.each(data,function(index, value) {

//alert(value.text + "|" + value.value);

$("#selProvince").append(""+ value.text +"");

});

});

//省份的值改变，则要绑定出城市下拉框

$("#selProvince").change(function(){

document.getElementById("selArea").options.length=1;//先清掉县下拉框的的数据

document.getElementById("selCity").options.length=1;//先清掉城市下拉框的的数据

$.getJSON("HandlerDropDownAjax.ashx",{"type":"city","fid":$(this).val()},function(data){

$.each(data,function(index, value) {

$("#selCity").append(""+ value.text +"");

});

});

});

//城市下拉框的值改变

$("#selCity").change(function(){

document.getElementById("selArea").options.length=1;//先清掉县下拉框的的数据

$.getJSON("HandlerDropDownAjax.ashx",{"type":"area","fid":$(this).val()},function(data){

$.each(data,function(index, value) {

$("#selArea").append(""+ value.text +"");

});

});

});

});

publicpartialclassThreeAjaxDrop_Default : System.Web.UI.Page

{

protectedvoidPage_Load(objectsender, EventArgs e)

{

stringsql ="select * from province";

stringstrTemp =""text":"{0}","value":"{1}"";//构造格式字符串 {"text":"北京","value":"00001"}

StringBuilder sb =newStringBuilder();

OleDbDataReader reader = OleDBHelper.ExecuteReader(sql);

while(reader.Read())

{

stringstr1 =string.Format(strTemp, reader["province"].ToString(), reader["provinceID"].ToString());

sb.Append("{"+str1+"},");

}

reader.Close();

stringjson = sb.ToString();

Response.Write("["+json.Substring(0,json.Length-1)+"]");

}

}

publicclassHandlerDropDownAjax : IHttpHandler {

publicvoidProcessRequest (HttpContext context) {

if(context.Request.QueryString["type"] !=null&& context.Request.QueryString["fid"] !=null)

{

stringtype = context.Request.QueryString["type"].ToString();//主要用于识别是查询city还是area表

stringfid = context.Request.QueryString["fid"].ToString(); //城市或区域的父ID

stringsql ="select * from "+ type +" where father='"+ fid +"'";

//构造数据的类型[{"text":"南昌","value":"0001"},{"text":"上饶","value":"0002"}]

//string strTemp = "{"text":"{0}","value":"{1}"}";//这里犯了个错误：直接这样构造会出错，因为大括号里又有格式大括号，解析会出错

stringstrTemp =""text":"{0}","value":"{1}"";//构造格式字符串 {"text":"北京","value":"00001"}

StringBuilder sb =newStringBuilder();

OleDbDataReader reader = OleDBHelper.ExecuteReader(sql);

while(reader.Read())

{

stringstr1 =string.Format(strTemp, reader[2].ToString(), reader[1].ToString());

sb.Append("{"+ str1 +"},");//两边的大括号格式化后加上

}

reader.Close();

stringjson = sb.ToString();

context.Response.Write("["+ json.Substring(0, json.Length - 1) +"]");//Substring的作用是去掉最后一个'逗号'

}

}

publicboolIsReusable {

get{

returnfalse;

}

}

}