javascript - 更新面板后 JS 被重置

Question

我有一个 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上面调用的。

提前致谢!

Answer 1

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

$(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);
});