DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 解決IE下select標簽innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
解決IE下select標簽innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
編輯:關於JavaScript     
前言:
這是一個老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);
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved