ModalPopupExtender의 양식 필드 가시성 변경

Question

DropDownList의 값 변경을 기반으로 ModalPopup (ModalPopupExtender) 내에서 양식 필드의 가시성을 변경하는 방법이 있는지 알고 싶습니다. 이 페이지의 기술이 작동하지 않는 것 같습니다 : Change visibility of ASP.NET label with JavaScript.

자바 스크립트 :

<script type="text/javascript"> 
    function ShowHide() { 
     if(document.getElementById('<%=DdlASVisibilityTest.ClientID%>') == "Show") { 
      document.getElementById('<%=LblASBillingName.ClientID%>').style.display = 'inherit'; 
      document.getElementById('<%=TxtASBillingName.ClientID%>').style.display = 'inherit'; 
     } 
     if(document.getElementById('<%=DdlASVisibilityTest.ClientID%>') == "Hide") { 
      document.getElementById('<%=LblASBillingName.ClientID%>').style.display = 'none'; 
      document.getElementById('<%=TxtASBillingName.ClientID%>').style.display = 'none'; 
     } 
    { 
</script> 

asp.net : 사전에

<asp:ModalPopupExtender OKControlID="BtnASOkay" CancelControlID="BtnASCancel" BackgroundCssClass="modalBackground" DropShadow="True" ID="BtnAddSupplier_ModalPopupExtender" runat="server" DynamicServicePath="" Enabled="True" TargetControlID="BtnAddSupplier" PopupControlID="PnlAddSupplier"> 
    <Animations> 
     <OnShown> 
      <FadeIn Duration="0.25" Fps="40" /> 
     </OnShown> 
     <OnHiding> 
      <FadeOut Duration="0.25" Fps="40" /> 
     </OnHiding> 
</Animations> 
</asp:ModalPopupExtender> 
<asp:RoundedCornersExtender ID="RCE" runat="server" TargetControlID="PnlAddSupplier" Radius="6" Corners="All" /> 
<asp:Button ID="BtnAddSupplier" runat="server" CssClass="buttonsmall" Text="Add Suplier" /> 
<asp:Panel ID="PnlAddSupplier" CssClass ="panel" runat="server"> 
    <div class="ASHeader"> 
     <asp:Label ID="LblASHeader" runat="server" Text="Add Supplier" CssClass="bodytxt" Font-Bold="True"></asp:Label> 
    </div> 
    <div class="ASInputs"> 
     <asp:Table runat="server"> 
      <asp:TableRow ID="TRASVisibilityTest" runat="server"> 
       <asp:TableCell ID="TCLblASVisibilityTest" runat="server"><asp:Label ID="LblASVisibilityTest" runat="server" Text="Test Visibility" CssClass="bodytxt" Font-Bold="False"></asp:Label></asp:TableCell> 
       <asp:TableCell ID="TCDdlASVisibilityTest" runat="server"><asp:DropDownList ID="DdlASVisibilityTest" runat="server" onchange="ShowHide()"> 
        <asp:ListItem>Show</asp:ListItem> 
        <asp:ListItem>Hide</asp:ListItem> 
       </asp:DropDownList></asp:TableCell> 
      </asp:TableRow> 
      <asp:TableRow ID="TRASBillingName" runat="server"> 
       <asp:TableCell ID="TCLblASBillingName" runat="server"><asp:Label ID="LblASBillingName" runat="server" Text="Supplier's Billing Name" CssClass="bodytxt" Font-Bold="False" style="display: none;"></asp:Label></asp:TableCell> 
       <asp:TableCell ID="TCTxtASBillingName" runat="server"><asp:TextBox ID="TxtASBillingName" CssClass="bodytxt" runat="server" style="display: none;"></asp:TextBox></asp:TableCell> 
      </asp:TableRow> 
     </asp:Table> 
    </div> 
    <div class="DivASControls" align="center"> 
     <asp:Button ID="BtnASOkay" runat="server" CssClass="buttonsmall" Text="Add Supplier" style="display: none;" /> 
     <asp:Button ID="BtnASCancel" runat="server" CssClass="buttonsmall" Text="Cancel" /> 
    </div> 
</asp:Panel> 

감사합니다 많이!

Answer 1

드롭 다운의 값/텍스트를 제대로 확인하지 않은 것 같습니다. 대신 컨트롤 자체를 "표시"또는 "숨기기"값과 비교합니다. 코드를 변경하여 도움이되는지 확인하십시오.

<script type="text/javascript"> 
    function ShowHide() 
    { 
     var visibilityElem = document.getElementById('<%=DdlASVisibilityTest.ClientID%>'); 
     var visibilityElemText = visibilityElem.options[visibilityElem.selectedIndex].text; 
     var display = (visibilityElemText == 'Show') ? 'inherit' : 'none'; 

     document.getElementById('<%=LblASBillingName.ClientID%>').style.display = display; 
     document.getElementById('<%=TxtASBillingName.ClientID%>').style.display = display; 
    } 
</script>