解决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中的setInterval和setTimeout使用实例
May 09 Javascript
jquery 实现返回顶部功能
Nov 17 Javascript
JavaScript操作Oracle数据库示例
Mar 06 Javascript
angularjs学习笔记之简单介绍
Sep 26 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
Jan 08 Javascript
理解js对象继承的N种模式
Jan 25 Javascript
详解JavaScript设计模式开发中的桥接模式使用
May 18 Javascript
JS日程管理插件FullCalendar简单实例
Feb 07 Javascript
深入理解Javascript中的作用域链和闭包
Apr 25 Javascript
详解Webpack实战之构建 Electron 应用
Dec 25 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
Sep 12 Javascript
Vue v-for循环之@click点击事件获取元素示例
Nov 09 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
ThinkPHP的截取字符串函数无法显示省略号的解决方法
2014/06/25 PHP
浅析PHP关键词替换的类(避免重复替换,保留与还原原始链接)
2015/09/22 PHP
PHP文件上传处理案例分析
2016/10/15 PHP
Swoole 5将移除自动添加Event::wait()特性详解
2019/07/10 PHP
详解php反序列化
2020/06/10 PHP
通过 Dom 方法提高 innerHTML 性能
2008/03/26 Javascript
String.prototype实现的一些javascript函数介绍
2013/11/22 Javascript
使用jquery.upload.js实现异步上传示例代码
2014/07/29 Javascript
删除Javascript Object中间的key
2014/11/18 Javascript
javascript制作的简单注册模块表单验证
2015/04/13 Javascript
node.js下LDAP查询实例分享
2015/09/30 Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
2015/10/06 Javascript
JS读写CSS样式的方法汇总
2016/08/16 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
2016/11/29 Javascript
angularjs封装$http为factory的方法
2017/05/18 Javascript
关于react-router的几种配置方式详解
2017/07/24 Javascript
nodejs require js文件入口,在package.json中指定默认入口main方法
2018/10/10 NodeJs
使用imba.io框架得到比 vue 快50倍的性能基准
2019/06/17 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
2019/09/23 Javascript
python使用Tkinter显示网络图片的方法
2015/04/24 Python
一文总结学习Python的14张思维导图
2017/10/17 Python
Python实现的多项式拟合功能示例【基于matplotlib】
2018/05/15 Python
Python基本数据结构之字典类型dict用法分析
2019/06/08 Python
TensorFLow 变量命名空间实例
2020/02/11 Python
Django中Aggregation聚合的基本使用方法
2020/07/09 Python
Django中使用Celery的方法步骤
2020/12/07 Python
几道Web/Ajax的面试题
2016/11/05 面试题
Java面向对象面试题
2016/12/26 面试题
大学生优秀自荐信范文
2014/02/25 职场文书
2014年无财产无子女离婚协议书范本
2014/10/09 职场文书
四川省传达学习贯彻党的群众路线教育实践活动总结大会精神新闻稿
2014/10/26 职场文书
车间统计员岗位职责
2015/04/14 职场文书
《搭石》教学反思
2016/02/18 职场文书
创业计划书之情侣餐厅
2019/09/29 职场文书
JavaScript实现复选框全选功能
2021/04/11 Javascript
关于对TypeScript泛型参数的默认值理解
2022/07/15 Javascript