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

JS在更新面板后重置

1 个答案: