解决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);
这是一个老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);
您可能感兴趣的文章:
- input+select(multiple) 实现下拉框输入值
- 在Spring中用select last_insert_id()时遇到问题
- Mysql select in 按id排序实现方法
- 解析MySQL中INSERT INTO SELECT的使用
- insert into select和select into的使用和区别介绍
- linux使用select实现精确定时器详解
- 解决Hibernate JPA中insert插入数据后自动执行select last_insert_id()
- 数据库插入数据之select into from与insert into select区别详解
- PostgreSQL教程(六)：函数和操作符详解（2）
- PostgreSQL教程(七)：函数和操作符详解（3）
- PostgreSQL教程(十六)：系统视图详解
- 探讨select in 在postgresql的效率问题
相关文章
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕）
这篇文章主要介绍了axios中封装使用、拦截特定请求、判断所有请求加载完毕的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-04-04
前端项目中报错Uncaught (in promise)的解决方法
最近在做项目的时候控制台报了一个错Uncaught(in promise) false,这篇文章主要给大家介绍了关于前端项目中报错Uncaught (in promise)的解决方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-04-04
这篇文章主要为大家详细介绍了JS实现简单可拖动的模态框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
highlight.js是一款轻量级的Web代码语法高亮库。下面通过实例代码给大家分享JS库之Highlight.js的用法详解，感兴趣的朋友跟随脚本之家小编一起学习吧2017-09-09
这篇文章主要为大家详细介绍了JS实现时间轴自动播放，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要介绍了JS生成随机打乱数组的方法,涉及javascript数组随机排序的相关操作技巧,需要的朋友可以参考下2017-12-12
这篇文章详细介绍了Javascript中创建对象的几种方式与每种方式的优缺点，其中包括工厂模式、构造函数模式、原型模式和组合使用构造函数模式和原型模式，有需要的小伙伴们一起来学习学习吧。2016-08-08
今天小编就为大家分享一篇在layui下对元素进行事件绑定的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
下面小编就为大家带来一篇js删除局部变量的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06![JavaScript 应用技巧集合[推荐]](//img.jbzj.com/images/xgimg/bcimg9.png)
前段时间我曾经对JavaScript中的应用技巧进行了收集和总结这里我将会对这些应用技巧进行集中描述，如果你觉得遗漏了一些好用的应用技巧，也请在留言中提出，我会及时更新到这篇文章中的。2009-08-08
![JavaScript 应用技巧集合[推荐]](http://img.jbzj.com/images/xgimg/bcimg9.png)
最新评论