根据 DropDownList 选定值显示带有 TextBox 的隐藏 DIV答案

【问题标题】：Show Hide DIV with TextBox based on DropDownList Selected Value根据 DropDownList 选定值显示带有 TextBox 的隐藏 DIV
【发布时间】：2018-06-08 15:46:17
【问题描述】：

在此我想在单击下拉值时弹出隐藏的 div。我的下拉列表值从数据库中获取。所以它填写动态。

<tr style="padding-top: 10px" class="table-row">
    <td class="auto-style1" style="padding-left: 20px; padding-top: 10px;">Select Report Type</td>
    <td style="padding-top: 10px" class="auto-style2">
        <asp:DropDownList ID="reportTypeDropDownList" runat="server" AutoPostBack="True" OnSelectedIndexChanged="reportTypeDropDownList_SelectedIndexChanged"></asp:DropDownList><br>
    </td>
</tr>


In above its my drop down list..I blinded data to it from database.

<div style="background-color:aquamarine"  id="div1">
<table>

<tr>
    <td>From Date</td>
    <td>
        <asp:TextBox ID="fromDateTextBox" runat="server"></asp:TextBox>
        <asp:CalendarExtender ID="fromDateTextBox_CalendarExtender" runat="server" TargetControlID="fromDateTextBox">
        </asp:CalendarExtender>
    </td>
</tr>
<tr>
    <td>To Date</td>
    <td>
        <asp:TextBox ID="toDateTextBox" runat="server"></asp:TextBox>
        <asp:CalendarExtender ID="toDateTextBox_CalendarExtender" runat="server" TargetControlID="toDateTextBox">
        </asp:CalendarExtender>
        <asp:Button ID="viewButton" runat="server" OnClick="viewButton_Click" Text="View" />
    </td>
</tr>
</table>
</div>

这是我想要在点击值时弹出的 div

protected void reportTypeDropDownList_SelectedIndexChanged(object sender, EventArgs e)
{
    ReportDataAccess reportDataAccess = new ReportDataAccess();

    if (reportTypeDropDownList.SelectedValue=="1")
    {
        //... some logic
    }
}

在这段代码中，我尝试在 report.aspx.cs 中执行此操作。

所以帮帮我吧！

【问题讨论】：

标签： javascript c# asp.net webforms

【解决方案1】：

HTML 标记由一个 ASP.Net DropDownList 和一个放置在 Panel 控件内的 TextBox 组成。已为 DropDownList 分配了 OnSelectedIndexChanged 事件处理程序，并且 AutoPostBack 属性设置为 True。通过将 Visible 属性设置为 False，可以隐藏 Panel 控件。你有护照吗？

<asp:DropDownList ID="ddlHasPassport" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList_Changed">
    <asp:ListItem Text="No" Value="N" />
    <asp:ListItem Text="Yes" Value="Y" />
</asp:DropDownList>
<hr />
<asp:Panel ID="pnlTextBox" runat="server" Visible="false">
    Passport Number:
    <asp:TextBox ID="txtPassport" runat="server" />
</asp:Panel>

在 ASP.Net 中显示基于 DropDownList 选择的隐藏文本框当在 DropDownList 中选择了一个项目（选项）时，选中的值被选中。

点击此链接 [https://dotnetsnippest.blogspot.com/2019/07/show-hide-textbox-based-on-dropdownlist.html][1]

【讨论】：

【解决方案2】：

您应该尝试为此使用 JQuery。例如，

    <div id="hiddenDiv"> 
      //Content 
    </div>

   <select id="testSelection">
      //options
   </select>

如果这是您拥有的 div 和 select，您可以使用 JQuery 来捕获更改事件，

 $('#testSelection').on('change', function() {
 if(this.value == 1)
      $('#hiddenDiv').show();
    })

如果您没有选择字段的 id 并且代码使用中没有任何其他选择，

$('select').on('change', function() {
if(this.value == 1)
  $('#hiddenDiv').show();
})

【讨论】：