在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);

解决IE下select标签innerHTML插入option的BUG(兼容的更多相关文章

  1. 解决IE下a标签点击有虚线边框的问题

    解决IE下a标签点击有虚线边框的问题 关键词:IE去除虚线边框.IE解决a标签虚线问题 先看看IE下,a标签出现的虚线边框问题: (上面中,红线包裹的就是一个翻页的按钮,按钮实际是hml的a标签做的, ...

  2. 解决IE下select option不支持display none样式

    万恶的IE,option竟然不支持display样式,想到的解决思路有二个: 1.ajax联动查询 2.jQuery的remove().after()方法 方法1的不好之处是初始页面,需要显示全部IP ...

  3. 解决IE6下select显示在弹出框上问题

    利用定位position:absolute;z-index:1;和iframe[z-index:-1]来解决此问题,最好根据需要加上: border='0' frameborder='0' scrol ...

  4. 转载:解决IE下a标签会触发window.onbeforeunload的问题

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  5. 解决IE6下a标签的onclick事件里的超链接不跳转问题

    今天遇到个很诡异的问题,就是<a href="javascript:void(0);" onclick="window.location=url"> ...

  6. js中select标签中的option选择

    f1 = function () { //var selected_val = document.getElementById(test).value; var obj = document.getE ...

  7. 用jquery获取select标签中选中的option值及文本

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  8. JS实现列表移动(通过DOM操作select标签)

    JS小例题 学习内容: 需求 总结: 学习内容: 需求 用 JavaScript 实现 select 标签的移动 实现代码 <!DOCTYPE html PUBLIC "-//W3C/ ...

  9. 解决Select标签的Option在IE浏览中display:none不生效的问题

    页面的Select标签,需要控制Select的Option不需要显示,根据条件来隐藏某些Option选项. 正常情况下使用hide()就能实现,hide()方法实际是给Option加上display属 ...

随机推荐

  1. docker容器,镜像常用操作

    1.查看正在运行的容器 docker ps 查看所有容器 docker ps -a 2.查看容器日志 docker logs -f showdoc 3.删除所有容器 docker rm $(docke ...

  2. mysql 聚合函数

    1.sum 用法 有这种类型的数据: id date user_id result 1 2015-05-04 1 win 2 2015-05-06 1 loss 3 2015-05-09 2 loss ...

  3. 深入理解uwsgi和gunicorn网络模型

    前言: 去年10月份建了一个python技术群,到现在为止人数已经涨到700人了.最一开始我经常在群里回应大家的问题,不管是简单还是困难的,我都会根据自己的经验来交流. 让人新奇的是一些初学者关注最多 ...

  4. 【图像处理】Haar-like特征

    特征提取的原理.代码等: 如果是白黑白,是减去一个黑的还是2个黑的,网上有不同的说法:应该需要看原论文了. 论文原文 The sum of the pixels which lie within th ...

  5. stm32 SPI介绍和配置

    SPI是一种高速的,全双工同步的通信总线,在芯片管脚上占用了四根线,节约了芯片的管脚,同时为PCB的布局节省了空间,提供了方便,因此越来越多的芯片集成了这种通信协议,STM32也就有了SPI接口. 有 ...

  6. CSU 1112: 机器人的指令

    1112: 机器人的指令 Submit Page          Description 数轴原点有一个机器人.该机器人将执行一系列指令,你的任务是预测所有指令执行完毕之后它的位置. ·LEFT:往 ...

  7. 了解ASP.NET Core框架的本质

    了解ASP.NET Core框架的本质 ASP.NET Core自身的运行原理和设计思想创建了一个 “迷你版” 的ASP.NET Core框架,并且利用这个 “极简” 的模拟框架阐述了ASP.NET ...

  8. Android NDK: Are you sure your NDK_MODULE_PATH variable is properly defined

    遇到问题: Android NDK: jni/Android.mk: Cannot find module with tag 'XXXXXXXXX' in import path Android ND ...

  9. C#对文件I/O的一些基本操作

    System.IO命名空间包含允许在数据流和文件上进行同步,异步及写入的类型,下面是关于c#文件的I/O基本操作讲解,需要的朋友可以参考下 文件是一些永久存储及具有特定顺序的字节组成的一个有序的,具有 ...

  10. 部署tomcat到Linux

    1. alt+p   放文件 2.解压到自定义 apps文件夹中 tar -zxvf apache-tomcat-7.0.68.tar.gz -C apps 3.进入文件启动tomcat/bin ./ ...