(本帖在版工的舊 Blog 中，發表日期為 2007/06/29)
我們在實作「連動下拉選單」時 (選了第一個下拉選單後，才會動態帶出其它下拉選單的選項)，若選單內容日後不須常更動，即可考慮直接寫死在 JavaScript 中，而無須從後端資料庫中，撈出資料後再綁定至下拉選單 (DropDownList)。但若已寫死成 JavaScript，又需要把 user 選過的選項儲存下來後，在其它頁面中再以同樣選項的連動下拉選單，自動帶出 user 曾經選過的選項的話，由於頁面剛開啟時，尚未觸發第一個下拉選單中 JavaScript 的 onChange 事件，所以其它下拉選單的選項也尚未產生，因此按照預設，無法將前一頁所儲存的選項，指派給後一頁尚未產生內容的下拉選單。
(若您不瞭解我想表達的意思，建議直接執行本帖的 ASP.NET 2.0 下載範例代碼，即可瞭解)
解決方式，是在 ASPX 頁面載入時，用 HTML + C# + JavaScript 代碼，強制觸發第一個下拉選單 JavaScript 的 onChange 事件，先連動帶出其它下拉選單的選項。但 JavaScript 中的 onChange 事件不同於 onBlur 或 onFocus 事件，能夠直接調用 object.blur() 和 object.focus() 等 method，並沒有所謂的 object.change() 這個 method；但我們可以改用 object.fireEvent() 去觸發 onChange 事件，如下所示：
document.all.DropDownList1.fireEvent('onChange');
若有上述儲存連動下拉選單選項、再於別頁顯示的需求時，我們即可先透過「儲存值」(包括取自資料庫、QueryString 或 Session 等方式所儲存的值)，將其指定給第二頁的第一個下拉選單、先指定其預設選項，再以上述方式，用代碼觸發其 onChange 事件，即可在第二頁頁面載入的同時，將其它所有連動下拉選單的內容都一次帶出來。本帖下載範例，執行畫面如下：
圖 1 三個 DropDownList，互相有連動關係，選完第一個選單，才會帶出第二個選單的選項，並依此類推
圖 2 將三個 DropDownList 的選項，透過 QueryString 帶到第二頁，並在頁面載入的同時，即觸發 JavaScript 的 fireDDL1 函數
本帖範例下載點：
http://files.cnblogs.com/WizardWu/070629.zip
執行時不需要資料庫。此範例的做法亦適用於各類型網站開發技術，真正的關鍵程式是位於 JavaScript 檔案夾中的那支 CreateDDLItems.js 程式。
第一頁 .aspx
<body
onload="fireDDL1()">
<form id="form1" runat="server">
<div>
第一頁<p></p>
<asp:HiddenField ID="HiddenField_step11" runat="server" />
<asp:HiddenField ID="HiddenField_step12" runat="server" />
<asp:HiddenField ID="HiddenField_step13" runat="server" />
<br />
<asp:DropDownList ID="DropDownList_step11" runat="server">
</asp:DropDownList>
<asp:DropDownList ID="DropDownList_step12" runat="server">
</asp:DropDownList>
<asp:DropDownList ID="DropDownList_step13" runat="server">
</asp:DropDownList>
<p></p>
<asp:Button ID="Button1" runat="server" Text="將值帶到下一頁" OnClick="Button1_Click" />
</div>
</form>
</body>
</html>
第一頁 .aspx.cs
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DropDownList_step11.Attributes["onChange"] = "build_FiveDdlOfStep11(this.selectedIndex);";
DropDownList_step12.Attributes["onChange"] = "saveValueToHiddenField12(this.selectedIndex);";
DropDownList_step13.Attributes["onChange"] = "saveValueToHiddenField13(this.selectedIndex);";
}
}
protected void Button1_Click(object sender, EventArgs e)
{
Response.Redirect("Default2.aspx?ddl1=" + HiddenField_step11.Value + "&ddl2=" + HiddenField_step12.Value + "&ddl3=" + HiddenField_step13.Value);
}
}
