我正在尝试使用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>
答案 0 :(得分:4)
使用像@Victor这样的类说。 ASP.Net版本&lt; 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
OnChange="ShowHide()"
runat="server"
<击> Autopostback='true'
击>
[从@SeanTaylor那样的下拉列表中取出自动回复 - 你想要改变你的javascript代码而不是ASP.Net回发到服务器机制。]
<击> onselectedindexchanged="ddlReports_SelectedIndexChanged"
击>
[按照nu-skool,JQuery方式(见下文)]将你的事件连接起来]
>
<asp:ListItem Text="Report 1" Value="Report1
[删除Value
] />
中的空格
然后您可以将所有reportdiv上的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();
});
});
答案 1 :(得分: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');
答案 2 :(得分:0)
撤回我之前的回答,因为我没有正确阅读您的源代码。
我注意到你在下拉列表中设置了autopostback =“true”,这将触发jquery,但随后页面将重新加载并且div的可见性不会改变。
删除autopostback,它应该可以工作。
div的ID应该与你命名的一样,因为它们没有runat =“server”