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 }