当其他事件发生时，用javascript隐藏的文本框将变为可见

Textbox hidden with javascript becomes visible when other events occur

本文关键字：文本 隐藏 javascript 事件 其他      更新时间：2023-09-26

当（从ddlSource）更改下拉值时，我有javascript可以隐藏几个文本框，这很好。接下来，当用户在另一个文本框中输入某个值时，我有一个ajax调用来填充一些标签。在表单加载时进行此ajax调用之后，隐藏的文本框现在可见。我哪里错了？

<asp:DropDownList ID="ddlSource" runat="server" 
                  TabIndex="80" EnableViewState="True" CssClass="Input" 
                  Width="162px" onchange="DisableEnable();">
    <asp:ListItem Text="" Value="" />
    <asp:ListItem Text="x" Value="x" />
    <asp:ListItem Text="y" Value="y" />
</asp:DropDownList>

我的enabledisable的javascript是

function DisableEnable() {
    var DropDown_Source = document.getElementById("<%= ddlSource.ClientID %>")
    if (DropDown_Source.options[DropDown_Source.selectedIndex].text == "y") {
        document.getElementById('txtSupplementNbr').style.visibility = 'visible';
        document.getElementById("txtDelDate").style.visibility = 'visible';
        document.getElementById('lblSupplementNbr').style.display = '';
        document.getElementById('lblDelDate').style.display = '';
    }
    else {
        document.getElementById("txtSupplementNbr").style.visibility = 'hidden';
        document.getElementById("txtDelDate").style.visibility = 'hidden';
        document.getElementById('lblSupplementNbr').style.display = 'none';
        document.getElementById('lblDelDate').style.display = 'none';
    }
}

使ajax调用的文本框

<asp:UpdatePanel id="UpdatePaneltxtTrialCaseNbr" runat="server">
    <ContentTemplate>
        <asp:TextBox ID="txtTrialCaseNbr" runat="server" Text="" tabindex="100" 
                     Width="200px" maxlength="120" cssclass="input" 
                     OnTextChanged="GetCaseSummaryCivilPlaintiffInfo"  
                     onblur="SearchTrialCaseNbr();GetCasePlaintiffInfo();" 
                     AutoPostBack="false" />
    </ContentTemplate>
</asp:UpdatePanel>

在它执行OnTextChanged()函数之后，我看到了以前隐藏的所有控件。如有任何帮助，我们将不胜感激。

由于ajax请求，html被重新呈现为其初始状态。使用Sys在ajax请求ends时调用DisableEnable()。WebForms。PageRequestManager endRequest更新表单元素状态的事件。

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args)
{
     DisableEnable();
}

您还可以将所有更改的控件放在更新面板中，以便在ajax调用之间由asp.net维护它们的状态。

您不需要在切换函数中处理可见性和显示。主要的区别是可见性隐藏了元素，但保持了它的位置，去掉了它。显示值应该对你很好。这里还有一个更简单的显示切换脚本，向它传递一个对象，它会检查它是否已经显示。

function toggle(obj) {
    var el = document.getElementById(obj);
    if ( el.style.display != 'none' ) {
        el.style.display = 'none';
    }
    else {
        el.style.display = '';
    }
}

现在，您只需要确保只有在需要时才调用它，并且onchange将继续切换显示。我相信@Adil的回复会解决你的这部分问题。

相关文章：