javascript中的DropDownlist onchange事件不会触发更新面板中的dropdownlist
我在Update Panel中有一个dropdownlist，点击按钮就可以从服务器端加载dropdownlist中的数据。现在，我在javascript中有了一个document.getElementById('dropdownlist').onchange事件处理程序，它在从javascript中选择值时不会被调用。
无需使用更新面板，它就可以正常工作。但随后整个页面都会在点击按钮时返回，以便在dropdown中加载数据。
下面是aspx代码：
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:Label ID="Label1" runat="server" Text="From Date:" style="display:inline" Font-Size="12"></asp:Label>  
<asp:TextBox ID="TextBox1" runat="server" ReadOnly = "false" ></asp:TextBox>
<img src="calender.png" />  
<asp:Label ID="Label2" runat="server" Text="To Date:" style="display:inline" Font-Size="12"></asp:Label>  
<asp:TextBox ID="TextBox2" runat="server" ReadOnly = "false" ></asp:TextBox>
<img src="calender.png" style="display:inline"/>  
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="btnGetTop20Cust" runat="server" Text="Get Top 20 Customers in the selected date range" onclick="btnGo_Click" /><br />
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" ></asp:DropDownList>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>下面是javascript：
document.getElementById('MainContent_DropDownList1').onchange = function () {
var dropDown = document.getElementById('MainContent_DropDownList1');
var value = dropDown[dropDown.selectedIndex].value;
var startDate = document.getElementById('MainContent_TextBox1').value;
var endDate = document.getElementById('MainContent_TextBox2').value;
GetData(value, startDate, endDate);
}回答 3
Stack Overflow用户
发布于 2014-09-24 16:25:49
检查dropdown的id，可以在更新面板中更改。
Stack Overflow用户
发布于 2014-09-25 13:29:42
请在pageLoad()中添加更改函数代码，每次UpdatePanel刷新后都会调用pageLoad()。
function pageLoad() {
document.getElementById('MainContent_DropDownList1').onchange = function () {
var dropDown = document.getElementById('MainContent_DropDownList1');
var value = dropDown[dropDown.selectedIndex].value;
var startDate = document.getElementById('MainContent_TextBox1').value;
var endDate = document.getElementById('MainContent_TextBox2').value;
GetData(value, startDate, endDate);
}
}除了我上面描述的方法之外，还有其他方法来解决这个问题。从这个link中我得到了一个非常有用的想法。
ASP.NET AJAX确实提供了相应的事件。Application.Init事件在每次页面加载时只触发一次，非常适合一次性初始化任务。它不能通过快捷功能获得，需要稍微多加小心，但它的用途是：
<asp:ScriptManager runat="server" />
<script type="text/javascript">
Sys.Application.add_init(function() {
// Initialization code here, meant to run once.
});
</script>请注意，对Application.add_init的调用位于ScriptManager之后。这是必要的，因为ScriptManager将其对MicrosoftAjax.js的引用注入到该位置。在该点之前尝试引用Sys对象将导致“sys is undefined”JavaScript错误。
Stack Overflow用户
发布于 2015-09-16 14:44:24
使用下面这样的代码
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent" ClientIDMode="Static">
然后更改您的javascript代码
document.getElementById('MainContent_DropDownList1').onchange = function () {}
至
$(document).ready(function () { document.getElementById('DropDownList1').onchange = function () {} });
或者你可以改变
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="false" onchange="ddlchange(this);" ></asp:DropDownList>
和
function ddlchange(ddl)
{
var value = ddl.value;
var startDate = document.getElementById('MainContent_TextBox1').value;
var endDate = document.getElementById('MainContent_TextBox2').value;
GetData(value, startDate, endDate);
}https://stackoverflow.com/questions/26011739
复制相似问题
腾讯云开发者
