解決IE下select標簽innerHTML插入option的BUG（兼容IE,FF,Opera,Chrome,Saf
2024-05-06 14:10:01
供稿：網友
前言：
這是一個老bug了，現在提供一個完美解決方案。由于我一直是用createElement來創建動態的option并添加，所以一直沒有遇到這個問題，但是每個人寫代碼風格不同，有的人就喜歡寫字符串形式的標簽并用innerHTML插入，這不就有問題了，為了方便不同編碼風格的人，我封裝了一個方法，用于解決ie的這個bug和兼容5大瀏覽器，這樣大家都可以用一個方法來實現不同的風格，便于維護管理。
bug描述：
在ie下面使用innerHTML來插入option選項的話，ie會去掉前面的<option>，并拆分成多個節點，這樣會造成select的出錯，不是沒有插進去，而是節點在轉換時出問題了，微軟對這個bug也有描述，并提供了兩個解決方案，大家可以自己搜索一下，我大概提下微軟的兩個方案。
1，使用createElement，這個是正規渠道，要出錯還真有問題了。
2，插入完整的select字符串，到div中。
實現：
原理：
既然是使用innerHTML的人，肯定是想用字符串來插入option了，這里主要就是解決這人人群，當然你也可以傳入createElement對象來插入。
對于傳入的參數會做個判斷，看是elementObj還是字符串，如果是elementObj那么就使用標準的add方法加入，并做兼容處理。如果是字符串則使用div包裝完整的select并轉換成dom對象用appendChild來加入。
注意：
b$.type.isElement(arg)是bBank里面用來判斷對象是否是element元素的方法
b$.browser.isIE()是bBank里面用來判斷是否是ie的方法
b$.parseDom(str)是bBank里面用來轉換字符串為標準dom的方法，在我前面的博客中有專門講解
bBank 框架介紹：http://www.cnblogs.com/bruceli/archive/2010/04/15/bBank.html
代碼如下:
var sltObj=document.getElementById('xx');//獲取select對象，這里只是給個例子，可以按自己習慣來獲取
function addOption(obj, arg) {
if (b$.type.isElement(arg)) {
if (b$.browser.isIE()) obj.add(arg);
else obj.add(arg, null);
return;
}
var str = '<select>' + arg + '</select>';
var slt = b$.parseDom(str)[0];
for (var i = 0, num = slt.length; i < num; i++) {
obj.appendChild(slt[0]);
}
};
使用：
代碼如下:
addOption(sltObj, '<option>a</option>');
END
到這里就結束了，在這里向大家推薦一個我自己寫的js框架，上面的這個方法集成在框架里面了
使用：b$('obj').addOption(arg);
