Изменить видимость поля формы в ModalPopupExtender

Question

Хотел узнать, есть ли способ изменить видимость поля формы в ModalPopup (из ModalPopupExtender) на основе изменения значения DropDownList. Техника этой страницы не работает: измените видимость метки ASP.NET с помощью JavaScript.

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>