Question

在此我想点击下拉值时弹出隐藏的div。我的下拉列表值来自数据库。所以它充满了动力。

 function TextChanged(){
        var first_name =  document.getElementById("first_name").value;
        var Last_name =  document.getElementById("Last_name").value;
        var city =  document.getElementById("city").value; 
      
        document.getElementById("id").value =  first_name.substring(0, 2) +Last_name.substring(0, 2) +city.substring(0, 2);  
    }

这是我点击值

时想要弹出的div

 <input type="text" id="first_name" onblur="TextChanged()">
    <input type="text" id="Last_name" onblur="TextChanged()">
    <input type="text" id="city" onblur="TextChanged()">
    <input type="text" id="id" readonly>

在此代码中，我尝试在<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>中执行此操作。

所以帮助我！

Answer 1

你应该尝试使用JQuery。例如，

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

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

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

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

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

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

Answer 2

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]

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

2 个答案: