使用 javascript 的 ASP.net 隐藏面板
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2433592/
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
ASP.net hiding panel using javascript
提问by Riain McAtamney
I have a radioButtonList with 2 items in it. A radiobutton with a "Yes" value and a radionButton with a "No" value.
我有一个包含 2 个项目的 radioButtonList。具有“是”值的单选按钮和具有“否”值的单选按钮。
Below that I have a panel which I want made visible when "Yes" radioButton is selected and hidden when "No" is selected. I had originally implemented this using the AutoPostBack attribute but I want to do it in Javascript so that it doesn't cause a postback. Here's the code. Any help would be greatly appreciated.
下面我有一个小伙子，我想要在选择“否”时选择并隐藏着“是”RadioButton时可见的面板。我最初是使用 AutoPostBack 属性实现的，但我想在 Javascript 中实现它，这样它就不会导致回发。这是代码。任何帮助将不胜感激。
<asp:RadioButtonList ID="rbl1" runat="server" onClick="changed(this);" >
<asp:ListItem Value="Yes">Yes</asp:ListItem>
<asp:ListItem Value="No">No</asp:ListItem>
<asp:Panel ID="panel1" runat="server">
<--other controls here -->
</asp:Panel>
function changed(rbl) {
//not sure what to put in here
}
Thanks in advance,
提前致谢，
Zaps
电击
采纳答案by Kelsey
Here is a quick example I made up:
这是我编写的一个快速示例：
<!-- Used grouped radio buttons instead of the RadioButtonList as it is harder to deal with -->
<asp:RadioButton ID="rbYes" runat="server" Text="Yes" GroupName="YourGroupName" Checked="true" />
<asp:RadioButton ID="rbNo" runat="server" Text="No" GroupName="YourGroupName" />
<br /><br />
<!-- Use a div instead of a panel. Panels are just glorified divs. -->
<div id="divTest">
This is a test
</div>
<script type="text/javascript">
$(document).ready(function()
{
$('#<%= rbYes.ClientID %>').click(function() { $('#divTest').show(); });
$('#<%= rbNo.ClientID %>').click(function() { $('#divTest').hide(); });
});
</script>
回答by Saineshwar
function OnclickPanelHide() {
if (this.value == "No") {
document.getElementByID('<%=panel1.ClientID%>').style.display = "none";
}
else {
document.getElementByID('<%=panel1.ClientID%>').style.display = "block";
}
}
</script>
Raja There is some bug in your code i just removed it
Raja 您的代码中有一些错误，我刚刚将其删除
回答by Raja
try this:
尝试这个：
if (this.value == "No")
{
document.getElementByID('<%=panel1.ClientId%').style.display = "none";
}
else
{
document.getElementByID('<%=panel1.ClientId%').style.display = "block";
}
Hope it helps.
希望能帮助到你。
回答by Jason M
if you don't mind doing a partial postback, you can also throw your code into an UpdatePanel(assuming that you don't want to postback so that the entire page doesn't have to go through a page life-cycle).
如果您不介意进行部分回发，您也可以将代码放入UpdatePanel（假设您不想回发以便整个页面不必经历页面生命周期）。
回答by Lance Harper
If you add a class or determine the real id of "panel1", you can use jQuery to hide it easily:
如果你添加一个类或者确定“panel1”的真实id，你可以使用jQuery轻松隐藏它：
$('idOfPanel').hide();
Or you without using jQuery, using the id of the div/panel:
或者你不使用 jQuery，使用 div/panel 的 id：
idOfPanel.style.display = "none";
To redisplay:
重新显示：
$('idOfPanel').show();
Or
或者
idOfPanel.style.display = "block";
