Question

我正在尝试创建一个表单，其中应根据下拉菜单显示或隐藏文本框。如果仅显示文本框，也会对其进行验证。

有人可以帮助我吗？

<asp:DropDownList 
    ID="txt_days" 
    CssClass="txt_drpbx" 
    runat="server"  
    siz="10" 
>
    <asp:ListItem Text="Select" Value="0"></asp:ListItem>
    <asp:ListItem Text="1" Value="1"></asp:ListItem>
    <asp:ListItem Text="2" Value="2"></asp:ListItem>
</asp:DropDownList>
<asp:RequiredFieldValidator 
    ID="RequiredFieldValidator6" 
    runat="server" 
    ControlToValidate="txt_days" 
    ForeColor="Red" 
    ErrorMessage="Please Select No of days on leave" 
    InitialValue="0" 
    ValidationGroup="fdbk_chk"
>*</asp:RequiredFieldValidator>
<asp:TextBox 
    ID="txt_todate" 
    runat="server" 
    ReadOnly="true" 
    Visible="false" 
    CssClass="txt_bx"
></asp:TextBox>
<asp:RequiredFieldValidator 
    ID="RequiredFieldValidator1" 
    runat="server" 
    ControlToValidate="txt_todate" 
    ForeColor="Red" 
    ErrorMessage="Please Select Feedback Given For" 
    ValidationGroup="fdbk_chk"
>*</asp:RequiredFieldValidator>
<asp:Button 
    ID="btn_submit" 
    Text="Submit" 
    CssClass="btn_button" 
    runat="server" 
    onclick="btn_submit_Click" 
    ValidationGroup="fdbk_chk" 
/>
<asp:ValidationSummary 
    ID="ValidationSummary1" 
    runat="server" 
    HeaderText="Some fields are missing" 
    ShowMessageBox="True" 
    ShowSummary="False" 
    ValidationGroup="fdbk_chk" 
/>

Answer 1

试试这个：

<script>

    function ShowHideTextBox(ddlId)
    {
         var ddl = document.getElementById(ddlId.id);

         if(ddl.value == 1)  //your condition
         {
             document.getElementById('txt_todate').style.display = 'none';
          }
         else
         {
             document.getElementById('txt_todate').style.display = '';

         }
    }

<asp:DropDownList ID="txt_days" CssClass="txt_drpbx" runat="server"  siz="10" onchange="ShowHideTextBox(this);" 

<asp:TextBox ID="txt_todate" runat="server" ReadOnly="true" Visible="false" CssClass="txt_bx"></asp:TextBox>

Answer 2

不使用visible，而是将其css设置为display：none

  <asp:TextBox ID="txt_todate" runat="server" style="display:none;" CssClass="txt_bx">
  </asp:TextBox>

并在更新中添加下拉列表

 <asp:DropDownList ID="ddlDays" CssClass="txt_drpbx" runat="server" onchange="ShowHide();">
   <asp:ListItem Text="Select" Value="0"></asp:ListItem>
   <asp:ListItem Text="Show" Value="1"></asp:ListItem>
   <asp:ListItem Text="Hide" Value="2"></asp:ListItem>
 </asp:DropDownList>

脚本中的

;

 <script  type="text/javascript">
   function ShowHide(){
    var value = document.getElementById('ddlDays').value;
    var theControl = document.getElementById("txt_todate");
    if(value != 1){  // only when value is 1 it must show
       theControl.style.display = "none";
     }
    else{
       theControl.style.display = "block";
    }
   }
  </script>

Answer 3

我尝试在我的最后显示没有它不起作用，但我成功了解visibility属性。所以，试试这个：

function Validate()
{
     var dropdown = document.getElementById('ID of the dropdown');

     if(Condition which you want) 
     {
         document.getElementById('txt_todate').style.visibility= true;
      }
     else
     {
         document.getElementById('txt_todate').style.visibility= false;

     }
}

Answer 4

服务器端的控制ID在客户端不一样。要相同并且可以使用带有javascript的ID，您必须添加到您的服务器控件ClientIDMode =“Static”

例如：

<asp:DropDownList ID="ddlDays" ClientIDMode="Static" CssClass="txt_drpbx" runat="server" onchange="ShowHide();">

Javascript将asp：textbox visible属性更改为true

4 个答案: