I am making a comment / request form for my website and in order to allow my users to
be as specific as possible I have a drop down list listing all of the 8 categories on my website. Once the first category of the drop down list is selected I am trying to make the ddl that corresponds with the selected category visible. How do I keep the second ddls invisible until the proper category is selected?
Here is the html code i have so far:
Select a Category:
<asp:DropDownList ID="ddlMaintab" runat="server" AutoPostBack="true"
onselectedindexchanged="ddlMaintab_SelectedIndexChanged">
<asp:ListItem Text="- Select - " Value=""></asp:ListItem>
<asp:ListItem Text="U" Value="1"></asp:ListItem>
<asp:ListItem Text="Re" Value="2"></asp:ListItem>
<asp:ListItem Text="Merc" Value="3"></asp:ListItem>
<asp:ListItem Text="Rep" Value="4"></asp:ListItem>
<asp:ListItem Text="A" Value="5"></asp:ListItem>
<asp:ListItem Text="Refi" Value="6"></asp:ListItem>
<asp:ListItem Text="Rete" Value="7"></asp:ListItem>
</asp:DropDownList>
<br /><br />
Sub Category:
<asp:DropDownList ID="ddlSub" runat="server" Visible="false" >
<asp:ListItem Text="app" Value="1"></asp:ListItem>
<asp:ListItem Text="CS" Value="2"></asp:ListItem>
<asp:ListItem Text="Saved" Value="3"></asp:ListItem>
<asp:ListItem Text="JLB" Value="4"></asp:ListItem>
<asp:ListItem Text="Completed" Value="5"></asp:ListItem>
<asp:ListItem Text="Search" Value="6"></asp:ListItem>
<asp:ListItem Text="Pre-approved" Value="7"></asp:ListItem>
<asp:ListItem Text="Notes" Value="8"></asp:ListItem>
<asp:ListItem Text="Document" Value="9"></asp:ListItem>
<asp:ListItem Text="Deal" Value="10"></asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="ddl1" runat="server" Visible="false" >
<asp:ListItem Text="app" Value="1"></asp:ListItem>
<asp:ListItem Text="CS" Value="2"></asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="ddl2" runat="server" Visible="false" >
<asp:ListItem Text="app" Value="1"></asp:ListItem>
<asp:ListItem Text="CS" Value="2"></asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="ddl3" runat="server" Visible="false" >
<asp:ListItem Text="app" Value="1"></asp:ListItem>
<asp:ListItem Text="CS" Value="2"></asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="ddl4" runat="server" Visible="false" >
<asp:ListItem Text="app" Value="1"></asp:ListItem>
<asp:ListItem Text="CS" Value="2"></asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="ddl5" runat="server" Visible="false" >
<asp:ListItem Text="app" Value="1"></asp:ListItem>
<asp:ListItem Text="CS" Value="2"></asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="ddl6" runat="server" Visible="false" >
<asp:ListItem Text="app" Value="1"></asp:ListItem>
<asp:ListItem Text="CS" Value="2"></asp:ListItem>
</asp:DropDownList>
Thank you so much btw this site is awesome
You need to implement cascading drop down lists. See here (caveat: own blog posting) for more details on how to do this:
Code Snippet: Cascading DropDownLists