Question

我有一个带有表的ASP.NET Web表单。在桌子内部，我有一个radiobuttonlist控件，下面我有一个Panel。面板内部是几个带有其他Web控件的标签。

我想要做的是根据radiobuttonlist中的选择显示或隐藏面板。在我的jQuery中，我有这个：

$(document).ready(function() {    
    $('#<%= rblCarrier.ClientID%>').find('input:radio').click(function() {
        var selVal = $('#<%= rblCarrier.ClientID %>').find('input:checked').val();
        if (selVal == "1") $("#mydiv").show("fast");                
        else  $("#mydiv").hide("fast");            
    })
});

如果我用$("#mydiv").show("fast"); alert显示替换alert，那么我知道到目前为止所做的一切都正常。

请记住，我的asp.net面板位于HTML表格中。

如果单选按钮值为“1”，我想要的是显示面板的内容，否则隐藏它。

Answer 1

我放弃了这一点。任何论坛上都没有人拥有实际使用.NET面板或占位符的代码。所以我采取了更简单的路线。我删除了面板，而是在表格行中嵌入了一个表格。我给表一个ID，然后很容易用jQuery显示/隐藏它。显然，.NET服务器控件与jQuery不兼容。

Answer 2

伙计我也在努力解决这个问题（使用jQuery来隐藏/显示一个Panel，但在我的情况下是使用RadioButtonList而不是在一个表内）并搜索了许多帖子但没有找到答案，但我能够让它工作这是我的表现......

我的代码如下：

<div>
            <p class="space">3.2. ACCOMMODATION (*)</p>

            <asp:RadioButtonList ID="accomodation" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow" Width="500px">
                <asp:ListItem Text="Not Required" Value="Not Required"></asp:ListItem>
                <asp:ListItem Text="Required" Value="Required"></asp:ListItem>
            </asp:RadioButtonList>

            <asp:Panel ID="PanelAccommodation" runat="server">
                <p>
                    Number of nights (*):
                     <asp:RequiredFieldValidator ID="RequiredFieldValidator12" runat="server" ControlToValidate="numberOfNights" ForeColor="red" ErrorMessage="<- Required"></asp:RequiredFieldValidator>
                </p>
                <asp:TextBox ID="numberOfNights" runat="server" Width="50px"></asp:TextBox>

                <ajaxToolkit:FilteredTextBoxExtender ID="FilteredTextBoxExtender1" TargetControlID="numberOfNights"
                    FilterType="Numbers" runat="server">
                </ajaxToolkit:FilteredTextBoxExtender>

                <p>Preferred Hotel:</p>
                <asp:TextBox ID="preferredHotel" runat="server" Width="450px"></asp:TextBox>

                <p>Preferred Hotel URL:</p>
                <asp:TextBox ID="preferredHotelURL" runat="server" Width="450px"></asp:TextBox>
            </asp:Panel>
        </div>

和我使用的jquery函数：

$(document).ready(function () {
            $("#MainContent_PanelAccommodation").hide("fast");
            $('#<%= accomodation.ClientID%>').find('input:radio').click(function () {
                var selVal = $('#<%= accomodation.ClientID %>').find('input:checked').val();
                if (selVal == "Required") {
                    $("#MainContent_PanelAccommodation").show("fast");
                }
                if (selVal == "Not Required") {
                    $("#MainContent_PanelAccommodation").hide("fast");
                }
            })
        });

请注意，jquery上的ID具有“MainContent”，而HTML上的ID不是这样，因为如果您检查代码并查找面板，它也可能显示和ID类似于MainContent_PanelAccommodation，因为它继承自：

<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">

希望这可以帮助人们解决同样的问题...

使用jQuery隐藏/显示表格内的Panel

2 个答案: