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

2024-02-21 19:41:04 59

本文实例讲述了jQuery+Asp.Net实现省市二级联动功能的方法。分享给大家供大家参考，具体如下：

页面html:

<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="ddlAjax.aspx.cs"Inherits="ThreeAjaxDrop_ddlAjax"%>



DropDownList三级联动

*{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+"");
});
});
});
});





三级联动：
==选择省份==
&nbsp;

asp.net部分:

(1)Default.aspx.cs

publicpartialclassThreeAjaxDrop_Default:System.Web.UI.Page
{
protectedvoidPage_Load(objectsender,EventArgse)
{
stringsql="select*fromprovince";
stringstrTemp="\"text\":\"{0}\",\"value\":\"{1}\"";//构造格式字符串{"text":"北京","value":"00001"}
StringBuildersb=newStringBuilder();
OleDbDataReaderreader=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)+"]");
}
}

(2)HandlerDropDownAjax.ashx

publicclassHandlerDropDownAjax:IHttpHandler{
publicvoidProcessRequest(HttpContextcontext){
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+"wherefather='"+fid+"'";
//构造数据的类型[{"text":"南昌","value":"0001"},{"text":"上饶","value":"0002"}]
//stringstrTemp="{\"text\":\"{0}\",\"value\":\"{1}\"}";//这里犯了个错误：直接这样构造会出错，因为大括号里又有格式大括号，解析会出错
stringstrTemp="\"text\":\"{0}\",\"value\":\"{1}\"";//构造格式字符串{"text":"北京","value":"00001"}
StringBuildersb=newStringBuilder();
OleDbDataReaderreader=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;
}
}
}

更多关于asp.net相关内容感兴趣的读者可查看本站专题：《asp.net优化技巧总结》、《asp.net字符串操作技巧汇总》、《asp.net操作XML技巧总结》、《asp.net文件操作技巧汇总》、《asp.netajax技巧总结专题》及《asp.net缓存操作技巧总结》。

希望本文所述对大家asp.net程序设计有所帮助。

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

热门推荐

随机推荐