0

Wanted to know if there's a way to change a form field's visibility within a ModalPopup (from ModalPopupExtender) based upon a DropDownList's change in value. This page's technique doesn't seem to work: Change visibility of ASP.NET label with 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>

Thanks a lot in advance!

4

1 回答 1

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>
于 2012-06-04T16:17:26.713 回答