解决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、css、img等浏览器缓存问题的2种解决方案
Oct 23 Javascript
jquery+javascript编写国籍控件
Feb 12 Javascript
老生常谈Javascript中的原型和this指针
Oct 09 Javascript
JavaScript实现水平进度条拖拽效果
Jan 18 Javascript
Bootstrap栅格系统简单实现代码
Mar 06 Javascript
jQuery+pjax简单示例汇总
Apr 21 jQuery
详解angularJs中关于ng-class的三种使用方式说明
Jun 02 Javascript
简单实现js上传文件功能
Aug 21 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
Apr 01 Javascript
layui table设置前台过滤转义等方法
Aug 17 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
Feb 19 Javascript
js判断鼠标移入移出方向的方法
Jun 24 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
jQuery+PHP+ajax实现微博加载更多内容列表功能
2014/06/27 PHP
PHP DB 数据库连接类定义与用法示例
2019/03/11 PHP
PHP中define() 与 const定义常量的区别详解
2019/06/25 PHP
jquery 图片 上一张 下一张 链接效果(续篇)
2010/04/20 Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
2011/02/11 Javascript
缓动函数requestAnimationFrame 更好的实现浏览器经动画
2012/12/07 Javascript
CSS3,HTML5和jQuery搜索框集锦
2014/12/02 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
2015/09/14 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
2017/03/25 jQuery
解决BootStrap Fileinput手机图片上传显示旋转问题
2017/06/01 Javascript
Easyui使用Dialog行内按钮布局的实例
2017/07/27 Javascript
ExtJs整合Echarts的示例代码
2018/02/27 Javascript
Angular数据绑定机制原理
2018/04/17 Javascript
使用vuex缓存数据并优化自己的vuex-cache
2018/05/30 Javascript
微信小程序实现滴滴导航tab切换效果
2018/07/24 Javascript
vue实现单一筛选、删除筛选条件
2020/10/26 Javascript
[02:23]2018DOTA2亚洲邀请赛趣味视频——反应测试
2018/04/04 DOTA
python根据出生日期获得年龄的方法
2015/03/31 Python
在Python中操作字典之setdefault()方法的使用
2015/05/21 Python
Python的Tornado框架的异步任务与AsyncHTTPClient
2016/06/27 Python
使用python实现tcp自动重连
2017/07/02 Python
python中文分词教程之前向最大正向匹配算法详解
2017/11/02 Python
在Python中通过threshold创建mask方式
2020/02/19 Python
PyTorch-GPU加速实例
2020/06/23 Python
英国银首饰公司:e&e Jewellery
2021/02/11 全球购物
输入N,打印N*N矩阵
2012/02/20 面试题
C#如何允许一个类被继承但是避免这个类的方法被重载?
2015/02/24 面试题
大学生自我鉴定
2013/12/08 职场文书
产品包装策划方案
2014/05/18 职场文书
大学第二课堂活动总结
2014/07/08 职场文书
大学生创业计划书
2014/08/14 职场文书
2014年工会工作总结
2014/11/12 职场文书
好媳妇事迹材料
2014/12/24 职场文书
会议开幕词
2015/01/28 职场文书
创业计划书之外语培训班
2019/11/02 职场文书
8g内存用python读取10文件_面试题-python 如何读取一个大于 10G 的txt文件?
2021/05/28 Python