本文实例讲述了jQuery+Asp.Net实现省市二级联动功能的方法。分享给大家供大家参考,具体如下:
页面html:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
<%@ Page Language= "C#" AutoEventWireup= "true" CodeFile= "ddlAjax.aspx.cs" Inherits= "ThreeAjaxDrop_ddlAjax" %>
<!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 runat= "server" >
<title>DropDownList三级联动</title>
<style type= "text/css" >
*{margin:0; padding:0;}
body{font-size:12px; font-family:Arial @宋体;}
</style>
<script type= "text/javascript" src= "../js/jquery-1.4.min.js" ></script>
<script type= "text/javascript" >
$(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( "<option value='" + value.value + "'>" + value.text + "</option>" );
});
});
//省份的值改变,则要绑定出城市下拉框
$( "#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( "<option value='" + value.value + "'>" + value.text + "</option>" );
});
});
});
//城市下拉框的值改变
$( "#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( "<option value='" + value.value + "'>" + value.text + "</option>" );
});
});
});
});
</script>
</head>
<body>
<form id= "form1" runat= "server" >
<div>
三级联动:<select id= "selProvince" >
<option value= "选择省份" >==选择省份==</option>
</select> <select id= "selCity" ><option>==选择城市==</option></select>& amp;nbsp; <select id= "selArea" ><option>==选择县==</option></select>
</div>
</form>
</body>
</html>
|
asp.net部分:
(1)Default.aspx.cs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
public partial class ThreeAjaxDrop_Default : System.Web.UI.Page
{
protected void Page_Load( object sender, EventArgs e)
{
string sql = "select * from province" ;
string strTemp = "\"text\":\"{0}\",\"value\":\"{1}\"" ; //构造格式字符串 {"text":"北京","value":"00001"}
StringBuilder sb = new StringBuilder();
OleDbDataReader reader = OleDBHelper.ExecuteReader(sql);
while (reader.Read())
{
string str1 = string .Format(strTemp, reader[ "province" ].ToString(), reader[ "provinceID" ].ToString());
sb.Append( "{" +str1+ "}," );
}
reader.Close();
string json = sb.ToString();
Response.Write( "[" +json.Substring(0,json.Length-1)+ "]" );
}
}
|
(2)HandlerDropDownAjax.ashx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
public class HandlerDropDownAjax : IHttpHandler {
public void ProcessRequest (HttpContext context) {
if (context.Request.QueryString[ "type" ] != null && context.Request.QueryString[ "fid" ] != null )
{
string type = context.Request.QueryString[ "type" ].ToString(); //主要用于识别是查询city还是area表
string fid = context.Request.QueryString[ "fid" ].ToString(); //城市或区域的父ID
string sql = "select * from " + type + " where father='" + fid + "'" ;
//构造数据的类型[{"text":"南昌","value":"0001"},{"text":"上饶","value":"0002"}]
//string strTemp = "{\"text\":\"{0}\",\"value\":\"{1}\"}";//这里犯了个错误:直接这样构造会出错,因为大括号里又有格式大括号,解析会出错
string strTemp = "\"text\":\"{0}\",\"value\":\"{1}\"" ; //构造格式字符串 {"text":"北京","value":"00001"}
StringBuilder sb = new StringBuilder();
OleDbDataReader reader = OleDBHelper.ExecuteReader(sql);
while (reader.Read())
{
string str1 = string .Format(strTemp, reader[2].ToString(), reader[1].ToString());
sb.Append( "{" + str1 + "}," ); //两边的大括号格式化后加上
}
reader.Close();
string json = sb.ToString();
context.Response.Write( "[" + json.Substring(0, json.Length - 1) + "]" ); //Substring的作用是去掉最后一个'逗号'
}
}
public bool IsReusable {
get {
return false ;
}
}
}
|
希望本文所述对大家asp.net程序设计有所帮助。