使用JQuery根据下拉列表所选值显示/隐藏控件

Question

使用JQuery根据下拉列表所选值显示/隐藏控件

3

我正在尝试使用JQuery根据下拉菜单的选定索引来显示/隐藏div标签，但它没有起作用。非常感谢您的帮助。

谢谢。

<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="drop_down_test.WebForm1" %>

<form runat="server" ID="frmReport">
    <asp:DropDownList ID="ddlReports" OnChange="ShowHide()" AutoPostBack="true" runat="server" 
        onselectedindexchanged="ddlReports_SelectedIndexChanged">
        <asp:ListItem Text="Please Select Report" Value="Default" />
        <asp:ListItem Text="Report 1" Value="ReportValue1" />
        <asp:ListItem Text="Report 2" Value="ReportValue2" />
    </asp:DropDownList>
    <br />
    <br />
    <div id="Report1Section">
        <asp:Label ID="lblReport1" Text="This is for Report 1" runat="server" />
    </div>
    <br />
    <div id="Report2Section">
        <asp:Label ID="lblReport2" Text="This is for Report 2" runat="server" />
    </div>
</form>

<script language="JavaScript" type="text/javascript" src="~/Scripts/jquery-1.4.1.js"></script>

<script type="text/javascript">
    function ShowHide() {
        var ddlSelectedIndex = ('#<%= ddlReportName.ClientID %>').get(0).selectedIndex;

        switch (ddlSelectedIndex) {
            case 1:
                $('#Report1Section').show('slow');
                $('#Report2Section').hide('fast');
                break;
            case 2:
                $('#Report1Section').hide('fast');
                $('#Report2Section').show('slow');
                break;
        }
    }
</script>

- BigBadDom

3个回答

3

由于母版页的原因，您元素的ID呈现方式与您声明的不同。我建议您使用类名称作为选择器来使用div。您可以猜测并硬编码div的预期ID，但如果您的代码结构发生变化，生成的ID也将发生变化。

尝试这个：

<div id="Report1Section" class="Report1">
        <asp:Label ID="lblReport1" Text="This is for Report 1" runat="server" />
    </div>
    <br />
    <div id="Report2Section" class="Report2">
        <asp:Label ID="lblReport2" Text="This is for Report 2" runat="server" />
    </div>

接下来：

$('.Report1').show('slow');

或者您可以使用服务器脚本动态获取ID：

$('<%= Report1Section.ClientID %>').show('slow');

- Victor

0

撤回我的先前答案，因为我没有正确阅读您的源代码。

我注意到您在下拉列表上设置了autopostback="true"，这将触发jquery，但然后页面将重新加载，div的可见性不会改变。

删除autopostback，它应该可以工作。

div的ID应该保持与您命名的相同，因为它们没有runat="server"。

- Sean Taylor

最好的做法是使用类名作为选择器。如果您的代码结构因某种原因而更改，那么ASP.NET生成的ID也会更改，您的JavaScript代码将无法正常工作。 - Victor

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- immutabl · Accepted Answer

使用类，就像@Victor所说的那样。ASP.Net版本小于4会影响ID。

利用多个类可以应用于HTML元素的事实。这使您可以分组内容。例如，将所有可隐藏的reportdivs分组在一起。

  <div id="Report2Section" class="Report2 reportDiv">
      <asp:Label ID="lblReport2" Text="This is for Report 2" runat="server" />
  </div>

然后使用列表项的值中去掉空格的名称来获取您需要显示的div的id。您可以在页面的ready(...)事件中像JQuery一样连接您的事件。 <asp:DropDownList ID="ddlReports" runat="server"
_{[像@SeanTaylor所说的那样，将下拉列表的自动提交取消 - 您希望更改触发您的javascript代码而不是ASP.Net提交到服务器机制。]} >

<asp:ListItem Text="Report 1" Value="Report1"/>
_{[从Value中删除空格]}

然后，您可以作为一个组调用所有报告div的slideDown，然后通过其下拉菜单中的ID调用slideUp：

$(document).ready(function(){//there is a more modern way of writing this line.
    $('.ddlReports').change(function(){//JQuery style of wiring events up  
            $('.reportDiv').slideUp();//takes care of whichever one is showing (if any).
            $('#' + $(this).val() + "Section").slideDown();
    });
});