根据ASP.NET中的下拉选择显示特定列表

时间:2015-01-14 16:44:38

标签: c# asp.net

我想根据下拉列表中的选择显示特定div,并隐藏其他列表。反之亦然。

这就是我所得到的,但我似乎无法让它发挥作用。

<asp:DropDownList ID="DropDownList1" runat="server" onselectedindexchanged="DropDownList1_SelectedIndexChanged1">            
    <asp:ListItem Text="Fruits" Value="2014"></asp:ListItem>
    <asp:ListItem Text="Colors" Value="2013"></asp:ListItem>
</asp:DropDownList>

<div id="div2014" runat="server">
    <ul>
        <li>Apples</li>
        <li>Oranges</li>
        <li>Bananas</li>
    </ul>
</div>
<div id="div2013" runat="server">
    <ul>
        <li>Red</li>
        <li>White</li>
        <li>Blue</li>
    </ul>
</div>

我的C#代码是

protected void DropDownList1_SelectedIndexChanged1(object sender, EventArgs e)
{
    div2014.Visible = false;
    div2013.Visible = false;

    switch (DropDownList1.SelectedItem.Text)
    {
        case "2014":
            div2014.Visible = true;
            break;
        case "2013":
            div2013.Visible = true;
            break;
    }
}

1 个答案:

答案 0 :(得分:1)

AutoPostBack属性添加到DropDownList

<asp:DropDownList ID="DropDownList1" runat="server" onselectedindexchanged="DropDownList1_SelectedIndexChanged1" AutoPostBack="True">

将您的代码更改为:

protected void DropDownList1_SelectedIndexChanged1(object sender, EventArgs e)
{
    div2014.Visible = false;
    div2013.Visible = false;

    switch (DropDownList1.SelectedValue)
    {
        case "2014":
            div2014.Visible = true;
            break;
        case "2013":
            div2013.Visible = true;
            break;
    }
}

并且您希望在选择值之前隐藏两个div:

<div id="div2014" runat="server" Visible="false">