如何在选择第一个 ddl 后使第二个下拉列表可见

Question

我正在为我的网站制作评论/请求表单，以便允许我的用户尽可能具体，我有一个下拉列表，列出了我网站上的所有 8 个类别。 选择下拉列表的第一个类别后，我正在尝试使与所选类别对应的 ddl 可见。 在选择正确的类别之前，如何使第二个 ddls 不可见？

这是我到目前为止的 html 代码：

    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>

非常感谢，这个网站真棒

Answer 1

您需要实现级联下拉列表。有关如何执行此操作的更多详细信息，请参阅此处（警告：自己的博客文章）：

代码片段：级联下拉列表

Answer 2

有几种方法可以实现此目的。首先，您可以将所有后续控件设置为 visible=不可见，并有一个在更改时触发的事件...或者你可以只有一个下拉菜单并创建一个新的"onchange"。

您还可以使用 ajax 仅部分回发并根据需要呈现新的下拉列表。