javascript中的DropDownlist onchange事件不会触发更新面板内的下拉列表答案

【问题标题】：DropDownlist onchange event in javascript no firing for dropdownlist inside Update Paneljavascript中的DropDownlist onchange事件不会触发更新面板内的下拉列表
【发布时间】：2014-11-18 15:24:37
【问题描述】：

我在更新面板中有一个下拉列表，我在单击按钮时从服务器端加载下拉列表中的数据。现在我在 javascript 中有一个 document.getElementById('dropdownlist').onchange 事件处理程序，它不会在从 javascript 中选择值时被调用。

不使用更新面板也可以正常工作。但随后整个页面会在单击按钮以在下拉列表中加载数据时发回。

这是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> &nbsp
<asp:TextBox ID="TextBox1" runat="server" ReadOnly = "false" ></asp:TextBox>
<img src="calender.png" />  &nbsp
<asp:Label ID="Label2" runat="server" Text="To Date:" style="display:inline" Font-Size="12"></asp:Label> &nbsp
<asp:TextBox ID="TextBox2" runat="server" ReadOnly = "false" ></asp:TextBox>
<img src="calender.png" style="display:inline"/> &nbsp

<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);
}

【问题讨论】：

你能把你的代码贴在这里吗？
请添加您的代码，以便我们检查它有什么问题。

标签： javascript asp.net drop-down-menu updatepanel onchange

【解决方案1】：

使用这样的代码

<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);
}

【讨论】：

【解决方案2】：

请在 pageLoad() 中添加 onchange 函数代码，pageLoad() 会在每次 UpdatePanel 刷新后调用。

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 错误。

【讨论】：

【解决方案3】：

检查下拉列表的id，它可能在更新面板中更改。

【讨论】：