隐藏/显示输入字段asp

时间:2018-06-04 08:56:11

标签: javascript asp.net hide

我正在尝试创建一个Web表单,用户可以在其中输入多个限定条件,我想创建一个添加更多详细信息按钮,并尝试隐藏一些输入字段,然后在显示时显示单击按钮,执行此操作的最佳方法是,到目前为止这是我的asp代码

<div class="tab-pane" id="four">
   <h2>Qualifications</h2>
   <br />
   <asp:Label runat="server" ID="lblQualSubject" AssociatedControlID="ddlQualSubject" CssClass="Emlabel"> Qualification Subject/Code: </asp:Label><asp:DropDownList ID="ddlQualSubject" runat="server" CssClass="Eminput"/>
   <br />
   <asp:Label runat="server" ID="lblQualYear" AssociatedControlID="txtQualYear" CssClass="Emlabel"> Qualification Year: </asp:Label><asp:TextBox ID="txtQualYear" runat="server" CssClass="Eminput" />
   <br />
   <asp:Label runat="server" ID="lblQualGrade" AssociatedControlID="txtQualGrade" CssClass="Emlabel"> Qualification Grade: </asp:Label><asp:TextBox ID="txtQualGrade" runat="server" CssClass="Eminput" /><br />
   <br />
   <asp:Label runat="server" ID="lblQualSubject2" AssociatedControlID="ddlQualSubject2" CssClass="Emlabel"> Qualification Subject/Code: </asp:Label><asp:DropDownList ID="ddlQualSubject2" runat="server" CssClass="Eminput"/>
   <br />
   <asp:Label runat="server" ID="lblQualYear2" AssociatedControlID="txtQualYear2" CssClass="Emlabel"> Qualification Year: </asp:Label><asp:TextBox ID="txtQualYear2" runat="server" CssClass="Eminput" />
   <br />
   <asp:Label runat="server" ID="lblQualGrade2" AssociatedControlID="txtQualGrade2" CssClass="Emlabel"> Qualification Grade: </asp:Label><asp:TextBox ID="txtQualGrade2" runat="server" CssClass="Eminput" />
   <br />
   <br />
   <asp:Label runat="server" ID="lblQualSubject3" AssociatedControlID="ddlQualSubject3" CssClass="Emlabel"> Qualification Subject/Code: </asp:Label><asp:DropDownList ID="ddlQualSubject3" runat="server" CssClass="Eminput"/>
   <br />
   <asp:Label runat="server" ID="lblQualYear3" AssociatedControlID="txtQualYear3" CssClass="Emlabel"> Qualification Year: </asp:Label><asp:TextBox ID="txtQualYear3" runat="server" CssClass="Eminput" />
   <br />
   <asp:Label runat="server" ID="lblQualGrade3" AssociatedControlID="txtQualGrade3" CssClass="Emlabel"> Qualification Grade: </asp:Label><asp:TextBox ID="txtQualGrade3" runat="server" CssClass="Eminput" />
   <br />
   <br />
   <asp:Label runat="server" ID="lblQualSubject4" AssociatedControlID="ddlQualSubject4" CssClass="Emlabel"> Qualification Subject/Code: </asp:Label><asp:DropDownList ID="ddlQualSubject4" runat="server" CssClass="Eminput"/>
   <br />
   <asp:Label runat="server" ID="lblQualYear4" AssociatedControlID="txtQualYear4" CssClass="Emlabel"> Qualification Year: </asp:Label><asp:TextBox ID="txtQualYear4" runat="server" CssClass="Eminput" />
   <br />
   <asp:Label runat="server" ID="lblQualGrade4" AssociatedControlID="txtQualGrade4" CssClass="Emlabel"> Qualification Grade: </asp:Label><asp:TextBox ID="txtQualGrade4" runat="server" CssClass="Eminput" />
   <br />
</div>

非常感谢任何建议

2 个答案:

答案 0 :(得分:1)

也许Bootstrap Collapse是您的选择:

https://getbootstrap.com/docs/4.0/components/collapse/

您可以使用它来显示/隐藏可选项。

答案 1 :(得分:0)

您可以添加Css样式属性display:none并在单击按钮后将其删除