使用JQuery来显示/隐藏控件,具体取决于下拉列表的选定值 [英] Using JQuery to Show/Hide controls depending on Dropdown list selected value
问题描述
我正在尝试使用JQuery基于下拉菜单的选定索引显示/隐藏div标签,但是它不起作用.任何帮助将不胜感激.
I'm trying to use JQuery to show/hide div tags based on the selected index of a drop down menu, however it isn't working. Any help would be greatly appreciated.
谢谢.
<%@ 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>
推荐答案
使用类似@Victor的类. ASP.Net版本< 4将与ID混淆.
Use classes like @Victor said. ASP.Net versions <4 will mess with IDs.
利用以下事实:可以将多个类应用于HTML元素.这使您可以对材料进行分组.例如.您所有可隐藏的reportdiv.
Take advantage of the fact that multiple classes can be applied to HTML elements. This allows you to group stuff. E.g. all your hideable reportdivs.
<div id="Report2Section" class="Report2 reportDiv">
<asp:Label ID="lblReport2" Text="This is for Report 2" runat="server" />
</div>
然后使用列表项的值中的名称(删除的空格)获取您需要显示的div的ID.您可以在页面的ready(...)
事件中将事件关联到JQuery.
Then use the names (spaces removed) from the values of the list items to get the id of the div you need to show. You can wire your events up a la JQuery in the page's ready(...)
event.
<asp:DropDownList ID="ddlReports
OnChange="ShowHide()"
runat="server"
Autopostback='true'
[像@SeanTaylor所说的那样,从下拉列表中删除自动回发-您希望更改触发您的JavaScript代码,而不是ASP.Net回发到服务器机制.]
<asp:DropDownList ID="ddlReports
OnChange="ShowHide()"
runat="server"
Autopostback='true'
[Take the autopostback off the dropdownlist like @SeanTaylor said - you want the change to fire your javascript code not the ASP.Net postback-to-server mechanism.]
onselectedindexchanged="ddlReports_SelectedIndexChanged"
[通过jQuery方式将事件连接到nu-skool(请参见下文)]
>
onselectedindexchanged="ddlReports_SelectedIndexChanged"
[Wire your events up the nu-skool, JQuery way (see below)]
>
<asp:ListItem Text="Report 1" Value="Report1
[删除Value
中的空间] />
<asp:ListItem Text="Report 1" Value="Report1
[remove the space in the Value
] />
然后,您可以在所有reportdiv上以组的形式调用slideDown,然后通过下拉菜单中的ID通过所需的ID来调用slideUp:
You can then call slideDown on all the reportdivs as a group, before calling slideUp on the one you need via its ID from the dropdown:
$(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();
});
});
这篇关于使用JQuery来显示/隐藏控件,具体取决于下拉列表的选定值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!