asp.net实现无刷新二级级联效果 ajax

页面JavaScript

 

   <script language="javascript" type="text/javascript">

        function XmlPost2(obj) {

            var svalue = obj.value;

            var webFileUrl = "GetSecond.ashx?secondid=" + svalue;

            var result = "";

            var xmlHttp = false;

            if (window.XMLHttpRequest) {

                xmlHttp = new XMLHttpRequest();

            }

            else if (window.ActiveXObject) {

 

                try {

 

                    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

                }

                catch (e) {

                    try {

                        xmlHttp = new ActiveXObject("Mircosoft.XMLHTTP");

                    }

                    catch (e)

                       { }

                }

            }

            else {

                window.alert("你的浏览器版本已经严重过时，请升级后早做操作！");

                return false;

            }

 

            xmlHttp.open("POST", webFileUrl, false);

            xmlHttp.send("");

            if (xmlHttp.readyState == 4) {

                if (xmlHttp.status == 200) {

                    result = xmlHttp.responseText;

                    if (result != "") {

                        document.all("ddlSecond").length = 0;

                        var piArray = result.split(",");

                        for (var i = 0; i < piArray.length; i++) {

                            var ary1 = piArray[i].toString().split("|");

                            document.all("ddlSecond").options.add(new Option(ary1[1].toString(), ary1[0].toString()));

                        }

                    }

                    else {

                        document.getElementById("ddlSecond").options[0] = new Option("请先选择", "");

                        document.getElementById("ddlSecond").length = 1;

                    }

                }

 

            }

        }

        function getData() {

            var second = document.getElementById("ddlSecond");

            var sindex = second.selectedIndex;

            var sValue = second.options[sindex].value;

            var sText = second.options[sindex].text;

            document.getElementById("HideId").value = sValue;

            document.getElementById("HideText").value = sText;

 

        }

    </script>

页面布局：

 

       <asp:HiddenField ID="HideId" runat="server" />

       <asp:HiddenField ID="HideText" runat="server" />

 

     一级类别：<asp:DropDownList ID="ddlFrist" runat="server" DataTextField="HeDescription"

                    DataValueField="HeId"></asp:DropDownList>

     二级类别：<asp:DropDownList ID="ddlSecond" runat="server" DataTextField="HeDescription"

                    DataValueField="HeTId">

                </asp:DropDownList>

后台代码：

 

    private void Bind()

    {

        HelpFristTypeBLL fristbll = new HelpFristTypeBLL();

        this.ddlFrist.DataSource = fristbll.GetList();

        this.ddlFrist.DataBind();

        ListItem listFrist = new ListItem("请选择", "-1");

        ddlFrist.Items.Insert(0, listFrist);

        this.ddlFrist.Attributes.Add("onchange", "XmlPost2(this);");

    }

GetSecond.ashx

 

<%@ WebHandler Language="C#" Class="GetSecond" %>

 

using System;

using System.Web;

using HouseBLL;

using HouseModels;

using HouseTool;

using System.Data;

using System.Data.SqlClient;

public class GetSecond : IHttpHandler

{

 

    public void ProcessRequest(HttpContext context)

    {

        context.Response.ContentType = "text/plain";

        string id = context.Request.QueryString["secondId"].ToString();

        string mystr = "";

        string sql = "select HeTId,HeDescription from HelpSecondType where heid= '" + id + "'";

        SQLDBTool hah = new SQLDBTool();

        DataSet ds = hah.DS_Query(sql);

        if (ds.Tables[0].Rows.Count != 0)

        {

            for (int i = 0; i < ds.Tables[0].Rows.Count; i++)

            {

                mystr += "," + ds.Tables[0].Rows[i][0].ToString() + "|" + ds.Tables[0].Rows[i][1].ToString();

            }

            mystr = mystr.Substring(1);

        }

        context.Response.Write(mystr);

    }

    public bool IsReusable

    {

        get

        {

            return false;

        }

    }

 

}