ASP.NET 聯動下拉框實現：服務端構建 JavaScript 實現客戶端無刷新級聯

經典需求：兩個 <select>，二級隨一級變化即時更新。純客戶端 JavaScript 方案，無 PostBack，體驗流暢。本文給出完整實現：服務端注冊腳本、頁面聲明、取值邏輯。

核心思路

1. Page_Load 中構建 JS 數據結構 (二維數組) 並 RegisterClientScriptBlock 注冊
2. 頁面兩個 <select>，一級 onchange 調用 JS 函數重填二級選項
3. 提交時 Request.Form 取二級選中值

1. 服務端注冊腳本 (Page_Load)

string scriptKey = "MenuChange";
if (!Page.IsStartupScriptRegistered(scriptKey) && !Page.IsPostBack) {
    string scriptBlock = @"
<script language='JavaScript'>
<!--
var bigClass = [], smallClass = [];

function InitBigClass() {
    bigClass[0] = ['0', '全部論壇'];
    bigClass[1] = ['3', 'Web 開發'];
    bigClass[2] = ['4', '軟件工程/管理'];
}

function InitSmallClass() {
    smallClass[0] = ['301', 'ASP', '3'];
    smallClass[1] = ['303', 'PHP', '3'];
    smallClass[2] = ['401', '軟件工程', '4'];
    smallClass[3] = ['403', '軟件測試', '4'];
}

function ChangeItem(form) {
    var sel = form.bigClassId;
    var target = form.smallClassId;
    var val = sel.options[sel.selectedIndex].value;

    target.options.length = 0; // 清空
    for (var i = 0; i < smallClass.length; i++) {
        if (smallClass[i][2] == val) {
            target.options[target.options.length] = new Option(smallClass[i][1], smallClass[i][0]);
        }
    }
}

InitBigClass(); InitSmallClass();
// -->
</script>";
    Page.RegisterClientScriptBlock(scriptKey, scriptBlock);
}

2. 頁面聲明兩個 Select

<select id="bigClassId" name="bigClassId" onchange="javascript:ChangeItem(document.Form1);">
    <option value="0" selected>全部論壇</option>
    <option value="3">Web 開發</option>
    <option value="4">軟件工程/管理</option>
</select>

<select id="smallClassId" name="smallClassId">
    <option>請選擇</option>
</select>

關鍵點： id/name 與 JS 代碼中 form.bigClassId/form.smallClassId 完全一致；Form1 為 <form runat="server"> 的客戶端 ID (默認)。

3. 後端取值 (Button_Click)

protected void BtnSubmit_Click(object sender, EventArgs e) {
    string selectedValue = Request.Form["smallClassId"]; // 直接按 name 取值
    // 或遍歷
    // for (int i = 0; i < Request.Form.Count; i++)
    //     if (Request.Form.AllKeys[i] == "smallClassId") { val = Request.Form[i]; break; }
}

進階建議

• 數據量大時：改用 AJAX 回調服務端動態獲取二級數據 (JSON)
• UpdatePanel 封裝實現局部刷新，代碼更簡潔但有 ViewState 開銷
• 前端框架 (jQuery/Vue/React) 接管渲染，服務端僅提供 WebAPI