Step by Step dropdown selection

Question

Please help me if you have an idea on autopostback in asp.net using C#

i have 4 dropdown lists in one page

if i selects 1st dropdownlist then it enables 2nd dropdownlist

and after selection an option in 2nd dropdownlist 3rd dropdownlist enables

and after selection an option in 3rd drop down list 4th dropdown list enables

please let me know to do this task...

please help me

Answer 1

Try this:-

ASPX

<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true"  OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
    <asp:ListItem Enabled="true" Text="Select Value" Value="-1"></asp:ListItem>
    <asp:ListItem Text="Value1" Value="1"></asp:ListItem>
    <asp:ListItem Text="Value2" Value="2"></asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="true"  OnSelectedIndexChanged="DropDownList2_SelectedIndexChanged">
     <asp:ListItem Enabled="true" Text="Select Value" Value="-1"></asp:ListItem>
     <asp:ListItem Text="Value1" Value="1"></asp:ListItem>
     <asp:ListItem Text="Value2" Value="2"></asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="DropDownList3" runat="server" AutoPostBack="true"  OnSelectedIndexChanged="DropDownList3_SelectedIndexChanged"> 
     <asp:ListItem Enabled="true" Text="Select Value" Value="-1"></asp:ListItem>
     <asp:ListItem Text="Value1" Value="1"></asp:ListItem>
     <asp:ListItem Text="Value2" Value="2"></asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="DropDownList4" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList4_SelectedIndexChanged">
     <asp:ListItem Enabled="true" Text="Select Value" Value="-1"></asp:ListItem>
     <asp:ListItem Text="Value1" Value="1"></asp:ListItem>
     <asp:ListItem Text="Value2" Value="2"></asp:ListItem>
</asp:DropDownList>

ASPX CS

  protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack) 
        {
            DropDownList1.Enabled = true;
            DropDownList2.Enabled = false;
            DropDownList3.Enabled = false;
            DropDownList4.Enabled = false;
        }
    }
    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        DropDownList2.Enabled = true;
    }
    protected void DropDownList2_SelectedIndexChanged(object sender, EventArgs e)
    {
        DropDownList3.Enabled = true;
    }
    protected void DropDownList3_SelectedIndexChanged(object sender, EventArgs e)
    {
        DropDownList4.Enabled = true;
    }

Answer 2

you can use SelectedIndexChanged event of drop down list to do the server side functionality and set

AutoPostBack = true

so that on selection change your page will get re-loaded.

Answer 3

Check out this Fiddle .

Important part is to handle the change event of dropdown list and to show another dropdownlist.

$("#one").change(function()
                 {
        $("#two").toggleClass("show",true);
                 });