注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

zjcjack的博客

 
 
 

日志

 
 

解决IE下select标签innerHTML插入option的BUG  

2012-02-07 10:27:43|  分类: HTML+JS+FLASH+CS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
前言: 
这是一个老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>'); 

最终写法

if (navigator.userAgent.indexOf('MSIE') < 0)
{
$(c).innerHTML=originalRequest.responseText;
}
else
addOption($(c),originalRequest.responseText);
}

function addOption(obj,arg)
{
var str = '<select>'+arg+'</select>';

var slt = parseDom(str)[0];

for (var i = 0, num = slt.length; i < num; i++) { 
obj.appendChild(slt[i]); 
}

function parseDom(arg) { 
   var objE = document.createElement("div"); 
   objE.innerHTML = arg; 
   return objE.childNodes; 
}; 
  评论这张
 
阅读(235)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017