设置控件的选定值后运行Javascript
简单的ASP.NET应用程序。
我有两个下拉控件。在第一个下拉菜单中,我有一个JavaScriptonChange
事件。 JavaScript启用第二个下拉菜单并从中删除一个值(在第一个下拉列表中选择的值)。如果他们单击下拉菜单的空白第一个值,则第二个下拉菜单将被禁用(并且选项将重置)。
我在OnPreRender方法中也有代码,它将基于第一个下拉菜单的值启用或者禁用第二个下拉菜单。这样可以在代码中选择第一个下拉列表的值(加载用户设置)。
我的问题是:
- 用户在第一个下拉菜单中选择内容。第二个下拉列表将通过JavaScript启用。
- 然后,他们更改第三个下拉菜单,以发起回发。回发后,下拉菜单处于正确状态(选择了第一个值,启用了第二个下拉菜单)。
- 如果他们然后单击"后退"按钮,则第二个下拉列表将不再启用,尽管应该启用,因为第一个下拉列表中选择了某些内容。
我已经尝试通过ClientScript.RegisterStartupScript添加启动脚本(该脚本将设置第二个下拉菜单的正确状态),但是当调用第一个下拉菜单时,其
selectedIndex`为'0',而不是实际是什么。我的猜测是选择的值是在我的启动脚本之后设置的(但仍然不调用onChange脚本)。
关于尝试什么的任何想法?
解决方案
回答
如果第二个下拉列表最初是通过javascript启用的(我假设这是在javascript onchange期间,因为我们未指定),则单击"后退"按钮以重新加载上一个回发将永远不会启用它。
将ASP.NET与经典javascript混合可能会很麻烦。我们可能想看看ASP.NET的Ajax实现(如果被迫使用较旧的ASP.NET版本,则可以使用第三方AjaxPanel控件)。这些将通过纯C#为我们提供所需的行为,而不会迫使我们诉诸javascript hackery-pokery。
回答
<%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> protected void indexChanged(object sender, EventArgs e) { Label1.Text = " I did something! "; } </script> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Test Page</title> </head> <body> <script type="text/javascript"> function firstChanged() { if(document.getElementById("firstSelect").selectedIndex != 0) document.getElementById("secondSelect").disabled = false; else document.getElementById("secondSelect").disabled = true; } </script> <form id="form1" runat="server"> <div> <select id="firstSelect" onchange="firstChanged()"> <option value="0"></option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> <select id="secondSelect" disabled="disabled"> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> <asp:DropDownList ID="DropDownList1" AutoPostBack="true" OnSelectedIndexChanged="indexChanged" runat="server"> <asp:ListItem Text="One" Value="1"></asp:ListItem> <asp:ListItem Text="Two" Value="2"></asp:ListItem> </asp:DropDownList> <asp:Label ID="Label1" runat="server"></asp:Label> </div> </form> <script type="text/javascript"> window.onload = function() {firstChanged();} </script> </body> </html>
编辑:替换了整个代码。即使在用户控件中,它也应该起作用。
我相信Register.ClientScriptBlock无法正常工作,因为我们在该块中编写的代码是在调用window.onload之前执行的。而且,我假设(我不确定这一点)当时DOM对象没有设置其值。并且,这就是为什么我们将selectedIndex始终设为0的原因。