JavaScript中的DropDownlist onchange事件在更新面板中沒有觸發dropdownlist

Question

我在“更新面板”中有一個下拉列表，單擊按鈕后，我便從服務器端將數據加載到下拉列表中。 現在我在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);
}

Answer 1

檢查下拉列表的ID，它可能會在更新面板中更改。

Answer 2

請在pageLoad（）中添加onchange函數代碼，每次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);
}
    }

除了上面介紹的方法以外，還有其他方法可以解決此問題。 通過這個鏈接，我得到了一個非常有用的想法。

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錯誤。

Answer 3

使用這樣的代碼

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