JS在更新面板后重置

JS gets reset after update panel

本文关键字：更新 JS      更新时间：2023-09-26

我有一个JS函数，它显示和隐藏下拉列表，并在下拉列表更改时调用。然而，我也在使用其他东西的更新面板，每次我选择某个东西时，JS都会重置，我想继续显示的额外下拉列表也会重置，即再次隐藏（尽管它不会重置值，这很好）。

默认情况下，额外的下拉列表是隐藏的。例如，当用户选择2时，它将显示2个下拉列表。如何在更新面板刷新后使下拉列表不再隐藏。

这是我的代码：

<!-- Preference CSS -->
<link rel="Stylesheet" type="text/css" href="Styles/Preference.css" />
<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        //Loading Page
    });

    function changeNumOfRooms(ddl) {
        if (ddl.value == "1") {
                document.getElementById("<%=roomNumDDL1.ClientID %>").style.display = "";//changes the number of room number fields
                document.getElementById("<%=roomNumDDL2.ClientID %>").style.display = "none";
                document.getElementById("<%=roomNumDDL3.ClientID %>").style.display = "none";
            }
            if (ddl.value == "2") {
                document.getElementById("<%=roomNumDDL1.ClientID %>").style.display = "";//changes the number of room number fields
                document.getElementById("<%=roomNumDDL2.ClientID %>").style.display = "";
                document.getElementById("<%=roomNumDDL3.ClientID %>").style.display = "none";
            }
            if (ddl.value == "3") {
                document.getElementById("<%=roomNumDDL1.ClientID %>").style.display = "";//changes the number of room number fields
                document.getElementById("<%=roomNumDDL2.ClientID %>").style.display = "";
                document.getElementById("<%=roomNumDDL3.ClientID %>").style.display = "";
            }
        }
    </script>


<%-- Body Content --%>


<asp:UpdatePanel ID="UpdateModule" UpdateMode="Conditional" runat="server">
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="modCodeDDL" EventName="SelectedIndexChanged" />
        <asp:AsyncPostBackTrigger ControlID="modTitleDDL" EventName="SelectedIndexChanged" />
    </Triggers>
    <ContentTemplate>
        <a href="#" title="Select the module code (Mandatory Field)">Module Code*</a>
        <asp:DropDownList ID="modCodeDDL" runat="server" OnSelectedIndexChanged="modCodeToTitle" AutoPostBack="True" />
        <a href="#" title="The name of the module e.g. 'Team Projects'. Mandatory Field.">Module Title*</a>
        <asp:DropDownList ID="modTitleDDL" runat="server" OnSelectedIndexChanged="modTitleToCode" AutoPostBack="True" Style="width: 250px;" />
    </ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdateBuilding" UpdateMode="Conditional" runat="server">
<Triggers>
    <asp:AsyncPostBackTrigger ControlID="buildingDDL" EventName="SelectedIndexChanged" />
    <asp:AsyncPostBackTrigger ControlID="parkDDL" EventName="SelectedIndexChanged" />
</Triggers>
<ContentTemplate>
    <a href="#" title="Choose the park that you would like. Mandatory Field.">Park*</a><!-- PARK -->
    <asp:DropDownList class="form-control" ID="parkDDL" Style="width: 150px;" OnSelectedIndexChanged="parkToBuilding" AutoPostBack="true" runat="server">
        <asp:ListItem Text="ALL" Value="ALL"></asp:ListItem>
        <asp:ListItem Text="Central" Value="C"></asp:ListItem>
        <asp:ListItem Text="West" Value="W"></asp:ListItem>
        <asp:ListItem Text="East" Value="E"></asp:ListItem>
    </asp:DropDownList>
    <a href="#" title="Choose the building that you would like">Building</a><!-- BUILDING -->
    <asp:DropDownList class="form-control" AutoPostBack="true" ID="buildingDDL" runat="server" style="width:300px;" OnSelectedIndexChanged="buildingToRoom"></asp:DropDownList>
    <a href="#" title="Do you require a particular room? If so select here">Room Number</a><!-- ROOM NUMBER -->
    <asp:DropDownList class="form-control" ID="roomNumDDL1" title="For room 1" runat="server"></asp:DropDownList>
    <asp:DropDownList class="form-control" ID="roomNumDDL2" title="For room 2" runat="server" style="display:none;"></asp:DropDownList>
    <asp:DropDownList class="form-control" ID="roomNumDDL3" title="For room 3" runat="server" style="display:none;"></asp:DropDownList>
</ContentTemplate>
</asp:UpdatePanel>
<a href="#" title="Enter the number of rooms required for this lecture e.g. 1,2,...">Number of rooms*</a><!-- NUMBER OF ROOMS -->
<asp:DropDownList ID="numOfRoomsDDL" runat="server" onchange="changeNumOfRooms(this)">
    <asp:ListItem Text="1" Value="1"></asp:ListItem>
    <asp:ListItem Text="2" Value="2"></asp:ListItem>
    <asp:ListItem Text="3" Value="3"></asp:ListItem>
</asp:DropDownList>

所有JS内容都是在ASP.NET之上调用的。

提前感谢！

必须在$(document).ready和_endRequest事件中调用DropDownList可见性更改函数。检查我下面的代码：

$(document).ready(function () {
     var numOfRoomsDDL = document.getElementById("<%= numOfRoomsDDL.ClientID%>");
     changeNumOfRooms(numOfRoomsDDL);
});
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
              var numOfRoomsDDL = document.getElementById("<%= numOfRoomsDDL.ClientID%>");
     changeNumOfRooms(numOfRoomsDDL);
});
相关文章：