DropDownList用JQuery实现Ajax三级联动
JQuery真的不愧于他的那句write less and do more,昨天自己写了一个用JQuery实现的DropDownList的三级联动，在这里和大家分享，望各位大牛指出不足之处。主要运用jquery的$.post（）函数，这是jquery实现ajax的关键函数，这样来实现异步的调用数据。
这里有两个页面一个是查询数据的.ashx页面，一个是有DropDownList的.aspx页面
AjaxDemo.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#parentDropDownList option").click(function() {
$("#childDropDownList option").remove();
$("#grandChildDropDownList option").remove();
$.post("GetData.ashx", { "ParentString": $(this).val() }, function(data, textStatus) {
if (textStatus = "success") {
var child = data.split("$");
for (var i = 0; i < child.length - 1; i++) {
var newOption = $("<option >" + child[i] + "</option>");
$(newOption).val(child[i]);
$("#childDropDownList").append(newOption);
}
$("#childDropDownList option").click(function() {
$("#grandChildDropDownList option").remove();
$.post("GetData.ashx", { "ParentString": $("#parentDropDownList").val(), "ChildString": $(this).val() }, function(data, textStatus) {
if (textStatus = "success") {
var grandChild = data.split("$");
for (var i = 0; i < grandChild.length - 1; i++) {
var newOption = $("<option >" + grandChild[i] + "</option>");
$(newOption).val(grandChild[i]);
$("#grandChildDropDownList").append(newOption);
}
}
});
});
}
else {
alert("Sorry");
}
});
});
});
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="parentDropDownList" runat="server"
Width="100">
</asp:DropDownList>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:DropDownList ID="childDropDownList" runat="server" Width="100">
</asp:DropDownList>
<asp:DropDownList ID="grandChildDropDownList" runat="server" Width="100">
</asp:DropDownList>
</div>
</form>
</body>
</html>
下面是查询数据的GetData.ashx
View Code
1 <%@ WebHandler Language="C#" Class="GetData" %>
2
3 using System;
4 using System.Web;
5 using System.Data;
6
7
8 public class GetData : IHttpHandler {
9
10 public void ProcessRequest (HttpContext context) {
11 context.Response.ContentType = "text/plain";
12
13 string sqlString,usefulInformation=" ";
14 string parentString=context.Request["ParentString"];
15 string childString=context.Request["ChildString"];
16 if (childString == null)
17 {
18 sqlString = "select distinct childName from tblLianJi where parentName='" + parentString + "'";
19 }
20 else
21 {
22 sqlString = "select grandChildName from tblLianJi where parentName='" + parentString + "' and childName='" + childString + "'";
23 }
24 DataTable dataTable = new DataTable();
25 dataTable = DataBase.GetDataTable(sqlString);
26 for (int i = 0; i < dataTable.Rows.Count;i++ )
27 {
28 usefulInformation += dataTable.Rows[i][0].ToString();
29 usefulInformation += "$";
30 }
31 context.Response.Write(usefulInformation);
32
33 }
34
35 public bool IsReusable {
36 get {
37 return false;
38 }
39 }
40
41 }
