javascript 使用 JQuery 根据下拉列表选择的值显示/隐藏控件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4839222/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using JQuery to Show/Hide controls depending on Dropdown list selected value
提问by BigBadDom
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.
我正在尝试使用 JQuery 根据下拉菜单的选定索引显示/隐藏 div 标签，但是它不起作用。任何帮助将不胜感激。
Thanks.
谢谢。
<%@ 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>
回答by indra
Use classes like @Victor said. ASP.Net versions <4 will mess with IDs.
使用@Victor 所说的类。ASP.Net 版本 <4 会弄乱 ID。
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.
利用多个类可以应用于 HTML 元素这一事实。这允许您对内容进行分组。例如，您所有可隐藏的reportdiv。
<div id="Report2Section" class="Report2 reportDiv">
<asp:Label ID="lblReport2" Text="This is for Report 2" runat="server" />
</div>
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.
然后使用列表项值中的名称（删除的空格）来获取您需要显示的 div 的 id。您可以将您的事件与页面ready(...)事件中的 JQuery 联系起来。
<asp:DropDownList ID="ddlReportsOnChange="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.]
<asp:DropDownList ID="ddlReportsOnChange="ShowHide()"runat="server"Autopostback='true'
[像@SeanTaylor 所说的那样从下拉列表中删除自动回发 - 您希望更改触发您的 javascript 代码，而不是 ASP.Net 回发到服务器机制。]
onselectedindexchanged="ddlReports_SelectedIndexChanged"
[Wire your events up the nu-skool, JQuery way (see below)]>
onselectedindexchanged="ddlReports_SelectedIndexChanged"
[用 nu-skool、JQuery 方式连接你的事件（见下文）]>
<asp:ListItem Text="Report 1" Value="Report1[remove the space in the Value]/>
<asp:ListItem Text="Report 1" Value="Report1[删除Value]中的空格/>
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:
然后，您可以在所有 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();
});
});
回答by Victor
The ID of your elements are rendered differently than you have declared due to the master page. I would recommend you use a class name for the div to use as selector instead. You could guess and hard code the expected ID o the div, but if your code structure changes, then the generated ID will too.
由于母版页的原因，元素 ID 的呈现方式与您声明的不同。我建议您使用 div 的类名作为选择器。您可以猜测和硬编码 div 的预期 ID，但是如果您的代码结构发生变化，那么生成的 ID 也会发生变化。
try this:
试试这个：
<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>
and then:
接着：
$('.Report1').show('slow');
or you can use server script to get the ID dynamically:
或者您可以使用服务器脚本动态获取 ID：
$('<%= Report1Section.ClientID %>').show('slow');
回答by Sean Taylor
Withdrawing my previous answer as I didn't read your source code properly.
撤回我之前的答案，因为我没有正确阅读您的源代码。
I've noticed that you have the autopostback="true" set on the dropdown, this will trigger the jquery, but then the page will re-load and the divs visability wont change.
我注意到您在下拉列表中设置了 autopostback="true"，这将触发 jquery，但随后页面将重新加载并且 div 可见性不会改变。
Remove the autopostback and it should work.
删除自动回发，它应该可以工作。
The div's ID's are should remain the same as what you have named them, as they don't have runat="server"
div 的 ID 应该与您命名的相同，因为它们没有 runat="server"
