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 }
posted @ 2011-04-24 17:34  shawnXiao  Views(4958)  Comments(2)    收藏  举报