使用 AJAX 填充下拉列表

Question

我有 3 个下拉框，是使用 HTML 选择标签创建的。页面加载时，第一个框有几个名称。现在，当我单击第一个框中的一个名称时，第二个框中应出现更多名称，当我单击第二个框中的名称时，第三个框中应出现更多名称。如何使用 AJAX 实现此目的？我只能使用 ASP.Net 和 MS SQL Server。我对 AJAX 完全是个菜鸟，我一直在自学这方面的知识，但没有任何效果。我已经寻找代码近一周了。我查了一下 w3schools.com，但是当我尝试该代码时，它不起作用。请帮助我，请一步步告诉我，要使其工作所需的东西，以及什么放在哪里。我的最后期限即将到来，但我却束手无策，试图让它发挥作用。帮我！！

Answer 1

我建议将三个下拉列表放在 UpdatePanel 中，并为每个 updatepanel 添加一个触发器。然后，当值发生变化时，重新填充下拉列表并让 updatepanel 推送更新。如果您想提交值，还可以保留会话状态。

我面前没有编译器，但如果需要，只需发表评论，我明天将发布代码。

---

工作示例

我使用的是 Visual Studio 和母版页附带的“传统模板”，所以请原谅内容占位符。但这应该证明我的意思：

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="MultiDropDown.aspx.cs" Inherits="AppSettingsRetrieval.MultiDropDown" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                String[] options = new[] { "ABC", "DEF", "GHI", "JKL", "MNO", "PQR", "STU", "VWX", "YZA" };
                foreach (String option in options)
                {
                    this.DropDownList1.Items.Add(new ListItem(option, option));
                }
            }
        }

        public void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
        {
            this.DropDownList2.Items.Clear();
            this.DropDownList2.Items.Add(new ListItem("--- Please Select One ---"));

            String[] options = new[] { "123", "456", "789", "101", "112", "131", "415", "161", "718" };
            foreach (String option in options)
            {
                var str = String.Format("{0} {1}", this.DropDownList1.SelectedValue, option);
                this.DropDownList2.Items.Add(new ListItem(str, str));
            }
            this.DropDownList2.Enabled = true;

            this.DropDownList3.Enabled = false;
        }

        public void DropDownList2_SelectedIndexChanged(object sender, EventArgs e)
        {
            this.DropDownList3.Items.Clear();
            this.DropDownList3.Items.Add(new ListItem("--- Please Select One ---"));

            String[] options = new[] { "test", "testing", "tester", "foo", "bar", "foobar" };
            foreach (String option in options)
            {
                var str = String.Format("{0} {1}", this.DropDownList2.SelectedValue, option);
                this.DropDownList3.Items.Add(new ListItem(str, str));
            }
            this.DropDownList3.Enabled = true;
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <asp:ScriptManager runat="server" ID="ScriptManager1"></asp:ScriptManager>

    <asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Conditional">
        <ContentTemplate>
            <fieldset>
                <legend>Consecutive Dropdown List</legend>
                <p>
                    Primary Filter:
                    <asp:DropDownList runat="server" ID="DropDownList1" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" AutoPostBack="true">
                        <asp:ListItem Text="---Please Select One---" />
                    </asp:DropDownList>
                </p>
                <p>
                    Secondary Filter:
                    <asp:DropDownList runat="server" ID="DropDownList2" OnSelectedIndexChanged="DropDownList2_SelectedIndexChanged" AutoPostBack="true" Enabled="false">
                        <asp:ListItem Text="---Please Select One---" />
                    </asp:DropDownList>
                </p>
                <p>
                    Final Filter:
                    <asp:DropDownList runat="server" ID="DropDownList3" Enabled="false">
                        <asp:ListItem Text="---Please Select One---" />
                    </asp:DropDownList>
                </p>
            </fieldset>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>