Jquery ajax xml dropdownlist 联动_jquery xml下拉关联-CSDN博客

本文介绍如何使用 jQuery AJAX 技术实现两个下拉框的联动效果。当选择第一个下拉框的选项时，第二个下拉框会根据所选内容动态加载数据。具体实现包括前端 JavaScript 代码及 C# 后端处理程序。

经过摸索终于解决了 jquery ajax 读取 xml实现下拉框联动的效果

代码如下：

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <link href="../css/jquery-ui-1.8.14.custom.css" rel="stylesheet" type="text/css" />
    <script src="../js/jquery.ui.core.js" type="text/javascript"></script>
    <script src="../js/jquery.ui.datepicker.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
        $(function () {
            $("#<%=ddlDaLei.ClientID %>").change(function () {
                var v = $("#<%=ddlDaLei.ClientID %>").val();
                $.ajax({
                    url: '../Ajax/LabelPrint.ashx',
                    type: 'get',
                    data: { 'catalogID': v },
                    dataType: 'xml',
                    error: function () {
                        alert("异步请求失败!");
                    },
                    success: function (xml) {
                        $("#<%=ddlXiaoLei.ClientID %>").empty(); //清空DropDownList2
                        $("<option value='请选择'>" + "请选择" + "</option>").appendTo($("#<%=ddlXiaoLei.ClientID %>"));
                        $(xml).find('ds').each( //ds是后台返回的xml的节点

                                function () {
                                    var catalogID = $(this).find("id").text();
                                    var catalogName = $(this).find("title").text();
                                    $("<option value=" + catalogID + ">" + catalogName + "</option>").appendTo($("#<%=ddlXiaoLei.ClientID %>"));
                                }
                            );
                    }
                });
            });
        });
    </script>
</asp:Content>

后台代码：

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

using System;
using System.Web;
using System.Text;
using System.Data;
using DBUtility;
using System.Xml;
public class LabelPrint : IHttpHandler {

    public void ProcessRequest (HttpContext context) {
        context.Response.StatusCode = 200;
        context.Response.Cache.SetCacheability(HttpCacheability.NoCache);
        DataSet ds = new DataSet("catalogID");
        string catalogID = context.Request.QueryString["catalogID"].ToString();//参数
        ds = GetQuarter(catalogID);
        if (ds == null || ds.Tables[0].Rows.Count==0)
        {
            context.Response.Write("<?xml version=\"1.0\" encoding=\"gbk\"?>\n ");
            context.Response.Write("<NewDataSet>");
            context.Response.Write("<ds>");
            context.Response.Write("<id></id>");
            context.Response.Write("<title></title>");
            context.Response.Write("</ds>");
            context.Response.Write("</NewDataSet>");
        }
        else
        {
            context.Response.Write("<?xml version=\"1.0\" encoding=\"gbk\"?>\n " + ds.GetXml());

        }
        context.Response.End();
    }

    private DataSet GetQuarter(string catalogID)
    {
        try
        {
            if (catalogID.Equals("请选择"))
            {
                return null;
            }
            else
            {
                DataSet ds = DbHelperSQL.Query("select id,title from B_Url where fatherid=" + catalogID + "");
                if (ds != null && ds.Tables[0].Rows.Count != 0)
                {
                    return ds;
                }
                else
                { return null; }
            }
        }
        catch (Exception ex)
        {
            throw ex;
        }
    }
    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}