JavaScript操作select下拉框：為什麼innerHTML失效及正確解決方案

問題現象

嘗試使用JavaScript修改HTML中select元素的options，通過設置innerHTML屬性發現無效，特別是在IE9及以下瀏覽器中完全無法工作。

錯誤代碼示例

function fun() {
    var e = document.getElementById("e");
    e.innerHTML = "<option>遼寧</option>";
}

根本原因

select元素的innerHTML屬性在多數瀏覽器中是只讀的，或者行為不一致。W3C標準並未規定select支持innerHTML寫入操作。

正確解決方案

使用select元素的options集合和Option構造函數進行標準DOM操作：

function fun() {
    var e = document.getElementById("e");
    e.options.length = 0; // 清空現有選項
    e.options.add(new Option('遼寧', 'option的value屬性'));
}

核心API解析

• options.length = 0：快速清空所有選項
• new Option(text, value)：創建新選項對象，參數分別為顯示文本和提交值
• options.add()：將選項添加到select元素中

兼容性說明

此方法兼容所有主流瀏覽器（包括IE6+），是操作select元素的標準跨瀏覽器方案。