ASP.NET Select 下拉框編輯時動態賦值與綁定時機

問題場景

頁面包含一個運行在服務端的 <select runat="server"> 控件。編輯模式下，需根據後台獲取的值（如 "闵行"）將對應選項設為選中。最初嘗試在 Page_Load 中將值存入 protected string str，前台用 <%=str%> 輸出到 JavaScript 賦值：

document.getElementById('sel').value = '<%=str%>';

靜態選項時可行，但選項是後台動態綁定（如 Repeater 循環生成 <option>）時失效。

核心原因：綁定時機與腳本執行順序

動態綁定的選項尚未生成時，JavaScript 已執行賦值，導致找不到匹配的 option，賦值無效。

解決方案

方案一：服務端綁定後直接設置 SelectedValue（推薦）

既然 select 已加 runat="server"，它在服務端即為 HtmlSelect 控件，綁定數據後直接設置屬性：

// 後台綁定數據源
sel.DataSource = GetOptions(); // 返回 List<ListItem> 或 DataTable
sel.DataTextField = "Text";
sel.DataValueField = "Value";
sel.DataBind();

// 綁定完成後直接設置選中值
sel.Value = "闵行"; // 或 sel.SelectedValue = "闵行";

無需前端腳本，避免時序問題。

方案二：前端腳本延遲至選項渲染完成後執行

若堅持前端賦值，需確保在選項 HTML 生成之後運行腳本。可將腳本放在頁面底部，或使用 window.onload / jQuery $(function(){...})：

<script>
$(function() {
    // 此時 select 選項已全部渲染
    $('#sel').val('<%=str%>');
});
</script>

但仍需確保 str 在服務端綁定前已賦值，否則輸出為空。

方案三：使用 ASP.NET 原生 DropDownList 控件

asp:DropDownList 提供更豐富的服務端 API（SelectedValue、Items.FindByValue 等），綁定與賦值一體化，避免 HTML 控件與服務端代碼的配合痛點。

關鍵點總結

• runat="server" 的 select 本質是 HtmlSelect，支持服務端綁定與屬性設置。
• 先綁定選項，後設置選中值，順序不可顛倒。
• 前端 JS 賦值必須在選項 DOM 就緒後執行，否則無效。
• 優先使用服務端屬性賦值，減少前後端協作複雜度。

代碼示例：完整後台綁定與賦值

protected void Page_Load(object sender, EventArgs e) {
    if (!IsPostBack) {
        // 1. 獲取數據
        var list = new List<ListItem> {
            new ListItem("請選擇", ""),
            new ListItem("闵行", "闵行"),
            new ListItem("浦東", "浦東")
        };
        // 2. 綁定
        sel.DataSource = list;
        sel.DataTextField = "Text";
        sel.DataValueField = "Value";
        sel.DataBind();
        // 3. 設置默認選中（編輯場景）
        string editValue = "闵行"; // 來自數據庫等
        sel.Value = editValue; // 自動匹配選中
    }
}

這樣既簡潔又可靠，無需前端腳本協助。