DropDownList 加入客戶端 onchange 事件完整教學

核心二步驟

1. 強制加入 onchange 屬性（IntelliSense 不會提示）
2. 設定 AutoPostBack="false" 避免觸發伺服器回傳

完整頁面範例

<%@ Page Language="C#" %>
<html xmlns="https://www.w3.org/1999/xhtml">
<head runat="server">
    <title>DropDownList 客戶端事件</title>
    <script type="text/javascript">
        function getDropDownList() {
            var ddl = document.getElementById("<%=ddl1.ClientID%>");
            var txt = ddl.options[ddl.selectedIndex].text;
            var val = ddl.value;
            alert("Text: " + txt + ", Value: " + val);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:DropDownList ID="ddl1" runat="server" 
            AutoPostBack="false" 
            onchange="getDropDownList();">
            <asp:ListItem Text="選項一" Value="V1" Selected="True" />
            <asp:ListItem Text="選項二" Value="V2" />
            <asp:ListItem Text="選項三" Value="V3" />
        </asp:DropDownList>
    </form>
</body></html>

關鍵點解析

進階應用

• 搭配 AJAX 即時查詢關鍵字建議
• 動態顯示/隱藏相關欄位
• 前端驗證選項合法性

掌握此技巧，即可在不觸發 PostBack 情況下豐富 DropDownList 互動體驗。