使用TextBox基于DropDownList选择值显示隐藏DIV

Posted 2021-05-01

在这里我想点击下拉值时弹出隐藏的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中做到这一点。

所以帮助我！

答案

您应该尝试使用JQuery。举个例子，

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

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

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

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

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

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