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 }

你可能感兴趣的:(jquery)