我有嵌套面板。如果选中某个字段，则可以看到面板1。在下拉更改事件中我想在面板1内显示panel2而没有刷新页面但是在下拉列表更改事件面板1隐藏
按代码如下
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style type="text/css">
#Panel1 {
width: 2000px;
display: none;
}
</style>
</head>
<script type="text/javascript">
$(document).ready(function () {
$("#chkRepeat").change(function () {
if ($(this).is(':checked')) {
$("#Panel1").show(1000);
} else {
$("#Panel1").hide(1000);
}
});
});
</script>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:Label ID="Label1" runat="server" Text="Starts on :" Font-Bold="True"></asp:Label>
<asp:TextBox ID="txtStart" runat="server"></asp:TextBox>
<br />
<br />
<asp:Label ID="Label2" runat="server" Text="Repeat" Font-Bold="True"></asp:Label>
<asp:CheckBox ID="chkRepeat" runat="server" />
<br />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server">
<asp:Label ID="Label3" runat="server" Text="Repeats : " Font-Bold="True"></asp:Label>
<asp:DropDownList ID="drpdwnList" AutoPostBack="true" runat="server" OnSelectedIndexChanged="drpdwnList_SelectedIndexChanged">
<asp:ListItem>Daily</asp:ListItem>
<asp:ListItem>Weekly</asp:ListItem>
<asp:ListItem>Monthly</asp:ListItem>
</asp:DropDownList>
<asp:Panel ID="Panel2" runat="server">
<asp:Label ID="Label4" runat="server" Text="Repeat on :" Font-Bold="True"></asp:Label>
<asp:CheckBox ID="Sun" runat="server" />S
<asp:CheckBox ID="Mon" runat="server" />M
<asp:CheckBox ID="Tue" runat="server" />T
<asp:CheckBox ID="Wed" runat="server" />W
<asp:CheckBox ID="Thur" runat="server" />T
<asp:CheckBox ID="Fri" runat="server" />F
<asp:CheckBox ID="Sat" runat="server" />S
</asp:Panel>
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="drpdwnList" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
<br />
<asp:Label ID="Label5" runat="server" Text="Ends : " Font-Bold="true"></asp:Label><%@ Page Language="C#" AutoEventWireup="true" CodeFile="ScheduleAutomation.aspx.cs" Inherits="ScheduleAutomation" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style type="text/css">
#Panel1 {
width: 2000px;
display: none;
}
</style>
</head>
<script type="text/javascript">
$(document).ready(function () {
$("#chkRepeat").change(function () {
if ($(this).is(':checked')) {
$("#Panel1").show(1000);
} else {
$("#Panel1").hide(1000);
}
});
});
</script>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:Label ID="Label1" runat="server" Text="Starts on :" Font-Bold="True"></asp:Label>
<asp:TextBox ID="txtStart" runat="server"></asp:TextBox>
<br />
<br />
<asp:Label ID="Label2" runat="server" Text="Repeat" Font-Bold="True"></asp:Label>
<asp:CheckBox ID="chkRepeat" runat="server" />
<br />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server">
<asp:Label ID="Label3" runat="server" Text="Repeats : " Font-Bold="True"></asp:Label>
<asp:DropDownList ID="drpdwnList" AutoPostBack="true" runat="server" OnSelectedIndexChanged="drpdwnList_SelectedIndexChanged">
<asp:ListItem>Daily</asp:ListItem>
<asp:ListItem>Weekly</asp:ListItem>
<asp:ListItem>Monthly</asp:ListItem>
</asp:DropDownList>
<asp:Panel ID="Panel2" runat="server">
<asp:Label ID="Label4" runat="server" Text="Repeat on :" Font-Bold="True"></asp:Label>
<asp:CheckBox ID="Sun" runat="server" />S
<asp:CheckBox ID="Mon" runat="server" />M
<asp:CheckBox ID="Tue" runat="server" />T
<asp:CheckBox ID="Wed" runat="server" />W
<asp:CheckBox ID="Thur" runat="server" />T
<asp:CheckBox ID="Fri" runat="server" />F
<asp:CheckBox ID="Sat" runat="server" />S
</asp:Panel>
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="drpdwnList" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
<br />
<asp:Label ID="Label5" runat="server" Text="Ends : " Font-Bold="true"></asp:Label>
<asp:TextBox ID="txtEnd" runat="server"></asp:TextBox>
</div>
</form>
</body>
</html>
<asp:TextBox ID="txtEnd" runat="server"></asp:TextBox>
</div>
</form>
背后的代码
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
chkRepeat.Checked = false;
Panel2.Visible = false;
}
}
protected void drpdwnList_SelectedIndexChanged(object sender, EventArgs e)
{
Panel1.Visible = true;
if (drpdwnList.Text == "Weekly")
{
Panel2.Visible = true;
}
else
Panel2.Visible = false;
}
答案 0 :(得分：0)
我认为您不需要更新面板来显示或隐藏面板，因为它会将整页发布到服务器进行处理（它会在请求/响应周期中增加）。 您可以删除“更新”面板。 只需使用Jquery轻松完成
只需在您的Jquery代码中包含以下代码
$(document).ready(function () {
$("#chkRepeat").change(function () {
if ($(this).is(':checked')) {
$("#Panel1").show(1000);
} else {
$("#Panel1").hide(1000);
}
});
$("#drpdwnList").change(function () {
if ($(this).is(':checked')) {
$("#Panel1").show(1000);
$("#Panel2").show(1000);
} else {
$("#Panel2").hide(1000);
}
});
});