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


Posted in Javascript onMay 13, 2010

前言:
这是一个老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);

Javascript 相关文章推荐
JS遮罩层效果 兼容ie firefox jQuery遮罩层
Jul 26 Javascript
为你的网站增加亮点的9款jQuery插件推荐
May 03 Javascript
不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象
Jan 11 Javascript
Jquery的each里用return true或false代替break或continue
May 21 Javascript
Javascript 运动中Offset的bug解决方案
Dec 24 Javascript
详解JavaScript中的4种类型识别方法
Sep 14 Javascript
详解jQuery中的empty、remove和detach
Apr 11 Javascript
详解vue事件对象、冒泡、阻止默认行为
Mar 20 Javascript
最基础的vue.js双向绑定操作
Aug 23 Javascript
在vue中使用jointjs的方法
Mar 24 Javascript
JS函数内部属性之arguments和this实例解析
Oct 07 Javascript
详解JavaScript之Array.reduce源码解读
Nov 01 Javascript
Js 随机数产生6位数字
May 13 #Javascript
js实现兼容IE6与IE7的DIV高度
May 13 #Javascript
JS 文件传参及处理技巧分析
May 13 #Javascript
Javascript 面向对象 继承
May 13 #Javascript
Javascript 面向对象 对象(Object)
May 13 #Javascript
Javascript 面向对象 命名空间
May 13 #Javascript
javascript 面向对象 function类
May 13 #Javascript
You might like
PHP取整数函数常用的四种方法小结
2012/07/05 PHP
基于PHP CURL用法的深入分析
2013/06/09 PHP
PHP实现基于面向对象的mysqli扩展库增删改查操作工具类
2017/07/18 PHP
基于ThinkPHP删除目录及目录文件函数
2020/10/28 PHP
jquery异步请求实例代码
2011/06/21 Javascript
js中有关IE版本检测
2012/01/04 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
2012/05/23 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
2013/01/08 Javascript
jquery.post用法示例代码
2014/01/03 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
2016/05/26 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
2016/12/26 Javascript
JS实现旋转木马式图片轮播效果
2017/01/18 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
2017/11/09 Javascript
AngularJS实时获取并显示密码的方法
2018/02/06 Javascript
nodeJs实现基于连接池连接mysql的方法示例
2018/02/10 NodeJs
利用CDN加速react webpack打包后的文件详解
2018/02/22 Javascript
JS实现全屏预览F11功能的示例代码
2018/07/23 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
2019/11/26 Javascript
Python解析xml中dom元素的方法
2015/03/12 Python
Python实现简单字典树的方法
2016/04/29 Python
python实现的正则表达式功能入门教程【经典】
2017/06/05 Python
python下10个简单实例代码
2017/11/15 Python
django 按时间范围查询数据库实例代码
2018/02/11 Python
Python开发网站目录扫描器的实现
2019/02/21 Python
Python实现图片批量加入水印代码实例
2019/11/30 Python
VSCode基础使用与VSCode调试python程序入门的图文教程
2020/03/30 Python
Python+Kepler.gl实现时间轮播地图过程解析
2020/07/20 Python
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
2012/12/09 HTML / CSS
HMV日本官网:全球知名的音乐、DVD和电脑游戏零售巨头
2016/08/13 全球购物
澳大利亚宠物食品和药物在线:Jumbo Pets
2018/03/24 全球购物
英国最受欢迎的母婴精品品牌:JoJo Maman BéBé
2021/02/17 全球购物
sort命令的作用和用法
2012/11/04 面试题
电大自我鉴定
2013/10/27 职场文书
医院营销工作计划
2015/01/16 职场文书
大学生简历自我评价2015
2015/03/03 职场文书
篮球拉拉队口号
2015/12/25 职场文书