使用JQuery来显示/隐藏控件取决于下拉列表选定的值

我想使用JQuery显示/隐藏基于选择的下拉菜单的索引的div标签，但它不工作。任何帮助将不胜感激。使用JQuery来显示/隐藏控件取决于下拉列表选定的值

谢谢。

<%@ 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>

来源

2011-01-29 BigBadDom

使用类，如@Victor说。 ASP.Net版本< 4将与ID混淆。

利用可以将多个类应用于HTML元素的事实。这可以让你分组的东西。例如。所有你可隐藏的报道。

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

然后使用列表项的值的名称（空格删除）来获取您需要显示的div的id。您可以在页面的ready(...)事件中将事件连接到la JQuery。

<asp:DropDownList ID="ddlReports ~~OnChange="ShowHide()"~~ runat="server" ~~Autopostback='true'~~
_{[取自动回过类似@SeanTaylor的下拉列表说 - 你想改变火JavaScript代码而不是ASP.Net回发到服务器的机制。]}

~~onselectedindexchanged="ddlReports_SelectedIndexChanged"~~
_{[电线您的活动了NU-斯库尔，JQuery的方式（见下文）}
>

<asp:ListItem Text="Report 1" Value="Report1_{[删除在Value]}/>空间

然后，您可以调用了slideDown上的所有reportdivs为一组，调用效果基本show你通过其ID需要从下拉列表中的人之前：

$(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(); 
    }); 
});

来源

2011-01-30 01:08:51 5arx

该方法非常有效。在你的评论中，你已经说过“有一种更现代的写这一行的方式”：你是指$（function（）{？ – BigBadDom 2011-01-30 11:29:29

回抽我以前的答案，因为我没有正确读取源代码。

我注意到你在下拉菜单中设置了autopostback =“true”，这会触发jquery，但是页面将重新加载，并且divs的可视性不会改变。

删除autopostback，它应该工作。

div的ID是应该保持一致，那么你命名他们，因为他们没有RUNAT =“服务器”

来源

2011-01-29 20:35:33

或最好在这种情况下，将用于选择一类名。如果您的代码结构因为任何原因而发生变化，那么ASP.NET生成的ID和您的JavaScript将会中断。 – Victor 2011-01-29 20:39:33

的元素的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');

来源

2011-01-29 20:42:20 Victor

使用JQuery来显示/隐藏控件取决于下拉列表选定的值

回答

相关问题