如何显示或隐藏文本框取决于下拉选择

Question

当用户更改下拉列表的选择时，将根据用户的选择显示相应的文本框。假设当用户从下拉列表中选择“A”时，文本框“A”将显示，而另一个文本框将不可见。问题是当用户在下拉列表中选择“A”时，其他两个文本框不会消失。aspx<asp:DropDownList ID="DropDownList1" runat="server" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">        <asp:ListItem></asp:ListItem>        <asp:ListItem Value="A" Text="A" />        <asp:ListItem Value="B" Text="B" />        <asp:ListItem Value="C" Text="C" /></asp:DropDownList>A <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>B <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>C <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>aspx.csprotected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e){    if (DropDownList1.SelectedItem.Text == "A")    {         TextBox2.Visible = false;         TextBox3.Visible = false;    }}

Answer 1

将所有文本框属性设置为可见 false，然后在下拉选择更改事件中尝试。

<asp:TextBox ID="TextBox1" runat="server" visible="false"></asp:TextBox>

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)

{

      if (DropDownList1.SelectedItem.Text == "A")

      {

            TextBox2.Visible = false;

      }

      else 

      {

            TextBox2.Visible = true;

      }

}

Answer 2

如果您的目标只是根据下拉选择切换文本框的可见性，您应该在页面上编写一个 JavaScript 函数，它将索引作为参数。然后它将其他文本框的索引文本框的可见性更改为 true 和 false。

像这样的东西：

Dropdown event: 

on-click=“return toggleText(selectedIndex);”

<script>

    function toggleText(index) {

        // show or hide textbox by setting it’s style display:block or display:none respectively 

        return false; // ensures the page is not posted-back to server

    }

</script>

Answer 3

它不起作用，因为您应该刷新页面。您应该将AutoPostBack="true"属性添加到您的DropDownList.

此外，您可以使用UpdatePanel不需要刷新所有页面。

在aspx中使用这个：

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

<asp:UpdatePanel ID="updatePanel1" runat="server" UpdateMode="Conditional">

    <ContentTemplate>

        <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">

             <asp:ListItem></asp:ListItem>

             <asp:ListItem Value="A" Text="A" />

             <asp:ListItem Value="B" Text="B" />

             <asp:ListItem Value="C" Text="C" />

         </asp:DropDownList>

         <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

         <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>

         <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>

    </ContentTemplate>

</asp:UpdatePanel>

我希望它能帮助你