Populating a drop down list using AJAX Populating a drop down list using AJAX ajax ajax

Populating a drop down list using AJAX


I would recommend placing the three dropdownlists in an UpdatePanel and adding a trigger to each for the updatepanel. Then, when the value changes, re-populate the dropdown and let the updatepanel push the update. Also keeps session-state in case you want to submit the values.

I don't have a compiler in front of me, but if need be just post a comment and I'll post the code tomorrow.


Working Example

I'm using the "Traditional template" that comes with visual studio and the master page, so excuse the content place holders. But this should demonstrate what I mean:

<%@ 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>