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