1、Handler1.ashx public class Handler1 : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; //context.Response.Write("Hello World"); List<Bol.AreaCityBol> bo_list = GetAreaCityList(); if (bo_list.Count > 0) context.Response.Write(ConvertAreaCityListToJson2(bo_list)); } private List<Bol.AreaCityBol> GetAreaCityList() { List<Bol.AreaCityBol> bo_list = new List<AreaCityBol>(); object oType = HttpContext.Current.Request["t"]; object oValue = HttpContext.Current.Request["v"]; if (oType == null) // || oValue == null return bo_list; else { string sType = oType.ToString().Trim(); string sValue = string.Empty; //HttpContext.Current.Server.UrlDecode(oValue.ToString().Trim()); if (oValue != null) sValue = HttpContext.Current.Server.UrlDecode(oValue.ToString().Trim()); Bll.AreaCityBll bll = new AreaCityBll(); if (sType.CompareTo("c") == 0) bo_list = bll.GetAreaCityListByParentCode(sValue); else if (sType.CompareTo("n") == 0) bo_list = bll.GetAreaCityListByParentName(sValue); return bo_list; } } private string ConvertAreaCityListToJson2(List<Bol.AreaCityBol> bo_list) { StringBuilder sb = new StringBuilder(); if (bo_list.Count > 0) sb.Append("["); int i = 0; foreach (Bol.AreaCityBol item in bo_list) { string cc = "{"; cc += string.Format("code:/"{0}/",name:/"{1}/"",item.AreaCode,item.AreaName); cc += "}"; //todo:去除最后一个逗号 if((++i)<bo_list.Count) cc += ","; sb.Append(cc); } if (bo_list.Count > 0) sb.Append("]"); return sb.ToString(); } public bool IsReusable { get { return false; } } } 2、HTMLPage1.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <mce:script language="javascript" src="script/jQuery/jquery-1.2.6-vsdoc.js" mce_src="script/jQuery/jquery-1.2.6-vsdoc.js" type="text/javascript"></mce:script> <mce:script language="javascript" type="text/javascript"><!-- jQuery(document).ready(function() { jQuery.getJSON( "Handler1.ashx", { t: "c", v: "" }, function(json) { jQuery.each(json, function(i) { jQuery("#Select1").append("<option value=/"" + json[i].code + "/">" + json[i].name + "</option>"); }); } ); }); function unionProvince() { var index = document.getElementById("Select1").selectedIndex var code = document.getElementById("Select1").options[index].value; var name = document.getElementById("Select1").options[index].text; //清空 jQuery("#Select2").empty(); jQuery("#Select3").empty(); //alert(code + " - " + name); jQuery.getJSON( "Handler1.ashx", { t: "c", v: code }, function(json) { jQuery.each(json, function(i) { jQuery("#Select2").append("<option value=/"" + json[i].code + "/">" + json[i].name + "</option>"); }); } ); // } function unionCity() { var index = document.getElementById("Select2").selectedIndex var code = document.getElementById("Select2").options[index].value; var name = document.getElementById("Select2").options[index].text; //清空 jQuery("#Select3").empty(); //alert(code + " - " + name); jQuery.getJSON( "Handler1.ashx", { t: "c", v: code }, function(json) { jQuery.each(json, function(i) { jQuery("#Select3").append("<option value=/"" + json[i].code + "/">" + json[i].name + "</option>"); }); } ); // } // --></mce:script> </head> <body> <select id="Select1" οnchange="unionProvince();" style="width:160px;"> <option>请选择...</option> </select> <select id="Select2" οnchange="unionCity();" style="width:160px;"> <option>请选择...</option> </select> <select id="Select3"style="width:160px;"> <option>请选择...</option> </select> </body> </html> 3、需用到:jQuery 4、json格式示例: [{pcode:"101000",pname:"广东省"},{pcode:"101200",pname:"湖南省"},{pcode:"101301",pname:"重庆市"},{pcode:"102365",pname:"福建省"},{pcode:"106800",pname:"浙江省"}] 5、用jQuery访问json示例: jQuery.each(json, function(i) { jQuery("#Select1").append("<option value=/"" + json[i].code + "/">" + json[i].name + "</option>"); });