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

Question

当下拉值更改(来自 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()函数之后，我看到了之前隐藏的所有控件。任何帮助将不胜感激。

Answer 1

由于 ajax 请求其初始状态，html 被重新渲染。使用 Sys.WebForms.PageRequestManager endRequest Event 在 ajax 请求 ends 上调用 DisableEnable()更新表单元素的状态。

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

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