快捷導(dǎo)航

解決IE下select標(biāo)簽innerHTML插入option的BUG（兼容IE,FF,Opera,Chrome,Safari)

更新時(shí)間：2010年05月13日 17:45:37 作者：

在ie下面使用innerHTML來插入option選項(xiàng)的話，ie會(huì)去掉前面的<option>，并拆分成多個(gè)節(jié)點(diǎn)，這樣會(huì)造成select的出錯(cuò)

前言：
這是一個(gè)老bug了，現(xiàn)在提供一個(gè)完美解決方案。由于我一直是用createElement來創(chuàng)建動(dòng)態(tài)的option并添加，所以一直沒有遇到這個(gè)問題，但是每個(gè)人寫代碼風(fēng)格不同，有的人就喜歡寫字符串形式的標(biāo)簽并用innerHTML插入，這不就有問題了，為了方便不同編碼風(fēng)格的人，我封裝了一個(gè)方法，用于解決ie的這個(gè)bug和兼容5大瀏覽器，這樣大家都可以用一個(gè)方法來實(shí)現(xiàn)不同的風(fēng)格，便于維護(hù)管理。

bug描述：
在ie下面使用innerHTML來插入option選項(xiàng)的話，ie會(huì)去掉前面的<option>，并拆分成多個(gè)節(jié)點(diǎn)，這樣會(huì)造成select的出錯(cuò)，不是沒有插進(jìn)去，而是節(jié)點(diǎn)在轉(zhuǎn)換時(shí)出問題了，微軟對(duì)這個(gè)bug也有描述，并提供了兩個(gè)解決方案，大家可以自己搜索一下，我大概提下微軟的兩個(gè)方案。
1，使用createElement，這個(gè)是正規(guī)渠道，要出錯(cuò)還真有問題了。
2，插入完整的select字符串，到div中。

實(shí)現(xiàn)：
　　原理：
　　既然是使用innerHTML的人，肯定是想用字符串來插入option了，這里主要就是解決這人人群，當(dāng)然你也可以傳入createElement對(duì)象來插入。
　　對(duì)于傳入的參數(shù)會(huì)做個(gè)判斷，看是elementObj還是字符串，如果是elementObj那么就使用標(biāo)準(zhǔn)的add方法加入，并做兼容處理。如果是字符串則使用div包裝完整的select并轉(zhuǎn)換成dom對(duì)象用appendChild來加入。

　　注意：
　　b$.type.isElement(arg)是bBank里面用來判斷對(duì)象是否是element元素的方法
　　b$.browser.isIE()是bBank里面用來判斷是否是ie的方法
　　b$.parseDom(str)是bBank里面用來轉(zhuǎn)換字符串為標(biāo)準(zhǔn)dom的方法，在我前面的博客中有專門講解
　　bBank 框架介紹：http://www.cnblogs.com/bruceli/archive/2010/04/15/bBank.html

復(fù)制代碼代碼如下:

 
　　　　　　var sltObj=document.getElementById('xx');//獲取select對(duì)象，這里只是給個(gè)例子，可以按自己習(xí)慣來獲取 
　　　　　　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]); 
} 
}; 

　　使用：

復(fù)制代碼代碼如下:

　　　　addOption(sltObj, '<option>a</option>');

END
到這里就結(jié)束了，在這里向大家推薦一個(gè)我自己寫的js框架，上面的這個(gè)方法集成在框架里面了
使用：b$('obj').addOption(arg);

您可能感興趣的文章: