[JavaScript] 在<select>中替換<option>的方式(KB 276228)

在網頁的設計中, 常會用到連動式的下拉式選單, 或是因為某個事件, 而置換掉下拉式選單中的選項.
但在 Microsoft 官網有提到一個問題: http://support.microsoft.com/kb/276228/zh-tw 
也就是, 不要用 innerHTML 去置換 <select> 中的 <option>.
以 jQuery 的用法來說, 很多人會使用以下的寫法:

?

1 2 3 4 5 6

// clear all options $("#myFavorList").find('option').remove(); // append new options $("#myFavorList").append('<option value=1>Yahoo</option>'); $("#myFavorList").append('<option value=2>PCHome</option>'); $("#myFavorList").append('<option value=3>Code Project</option>');

以下兩張圖是在 IE7 上執行的結果:

-->

可以發現, 如果原本的選項長度不長(ex: N/A), 利用 jQuery 的 .append() 會造成顯示上的問題. (不過 IE8 看不到這個效果)
因為 jQuery 的 .append() 使用到了 innerHTML 去設定內容.
若要解決這個顯示上的問題,  我目前知道的是以下三種做法:

1. 如 KB 所建議的, 將置換的層級拉高, 連 <select> 也換掉.
2. 在選項設計上, 一開始就要給一個最長的選項, 強迫瀏覽器事先呈現足夠長度的選項.
   但這在實務上不見得可行, 因為一般會想要動態置換下拉式選單的選項, 其背後的資料就是不固定的.
3. 使用  KB 說明的傳統做法: (這邊我包裝了一下 option 的資料)
   ?

   1 2 3 4 5 6 7 8 9 10 11 12

   var lstMyFavorList = document.getElementById("myFavorList"); var myOptions = {     1 : 'Yahoo',     2 : 'PCHome',     3 : 'Code Project' }; $.each(myOptions, function(val, text) {     var myOption = document.createElement("OPTION");     myOption.text = text;     myOption.value = val;     lstMyFavorList.add(myOption); });

   結果就會如下圖正常地依選項的資料長度做較佳的呈現:
   

後記:
在測試上, 目前 IE8 或 FireFox 其實都可以正常呈現 innerHTML 後的選項, 有問題的是 IE7 .
但以開發者的角度來說, 不太能夠要求所有的使用者都使用我們希望的瀏覽器來瀏覽網頁, 所以還是要慎用可能會造成問題的寫法.