解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)

 更新时间:2010年05月13日 17:45:37   转载 作者:  
在ie下面使用innerHTML来插入option选项的话,ie会去掉前面的<option>,并拆分成多个节点,这样会造成select的出错
前言:
这是一个老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);

相关文章

  • 微信JS SDK接入的几点注意事项(必看篇)

    微信JS SDK接入的几点注意事项(必看篇)

    下面小编就为大家带来一篇微信JS SDK接入的几点注意事项(必看篇)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • js倒计时简单实现方法

    js倒计时简单实现方法

    这篇文章主要介绍了js倒计时简单实现方法,方便一些提示重要日期的来临,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • js拼接html字符串的注意事项

    js拼接html字符串的注意事项

    下面小编就为大家带来一篇js拼接html字符串的注意事项。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • 微信小程序基于Taro的分享图片功能实践详解

    微信小程序基于Taro的分享图片功能实践详解

    这篇文章主要介绍了微信小程序基于Taro的分享图片功能实践详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07
  • 简介BootStrap model弹出框的使用

    简介BootStrap model弹出框的使用

    这篇文章主要介绍了BootStrap model弹出框的使用,介绍的非常详细,具有参考借鉴价值,感兴趣的朋友一起学习吧
    2016-04-04
  • js格式化时间的方法

    js格式化时间的方法

    这篇文章主要介绍了js格式化时间的方法,对javascript时间格式化的方法进行了总结,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • JS只能输入正整数的简单实例

    JS只能输入正整数的简单实例

    下面小编就为大家带来一篇JS只能输入正整数的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • layUI实现前端分页和后端分页

    layUI实现前端分页和后端分页

    这篇文章主要为大家详细介绍了layUI实现前端分页和后端分页,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • 利用React-router+Webpack快速构建react程序

    利用React-router+Webpack快速构建react程序

    目前 React、Webpack 等技术如火如荼,你是不是还在愁苦如何把这些杂乱的知识怎么学习一下,开启一段新的前端开发之路呢?那么这篇将给大家运用示例代码详细的介绍使用React-router和Webpack如何快速构建一个react程序,感兴趣的朋友们下面来一起看看吧。
    2016-10-10
  • JavaScript交换变量的常用方法小结【4种方法】

    JavaScript交换变量的常用方法小结【4种方法】

    这篇文章主要介绍了JavaScript交换变量的常用方法,结合实例形式总结分析了JavaScript交换变量的4种实现方法与操作注意事项,需要的朋友可以参考下
    2020-05-05

最新评论