Show Hide DIV with TextBox based on DropDownList Selected Value

Question

In this I want to popup hidden div when click the drop-down value. My drop down list values get from database. So it fill in dynamical.

<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>

This is the div what i want to popup when click the value

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

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

in this code I tried to do it in report.aspx.cs .

So help me!

Answer 1

You should try to use JQuery for this. As an example,

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

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

If this is the div and the select you have, you could use JQuery to capture the change event,

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

if you do not have an id for the select field and if there is no any other selection in the code use,

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

Answer 2

The HTML Markup consists of an ASP.Net DropDownList and a TextBox placed inside a Panel control. The DropDownList has been assigned an OnSelectedIndexChanged event handler and the AutoPostBack property is set to True. The Panel control is hidden by setting Visible property to False. Do you have Passport?

 <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>

Showing Hiding TextBox based on DropDownList selection in ASP.Net When an item (option) is selected in the DropDownList, the selected value is checked.

Follow this link [ https://dotnetsnippest.blogspot.com/2019/07/show-hide-textbox-based-on-dropdownlist.html][1]