解决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 相关文章推荐
JavaScript的Function详细
Nov 14 Javascript
js数组转json并在后台对其解析具体实现
Nov 20 Javascript
详解JS面向对象编程
Jan 24 Javascript
jQuery实现的分子运动小球碰撞效果
Jan 27 Javascript
不定义JQuery插件 不要说会JQuery
Mar 07 Javascript
微信小程序(应用号)简单实例应用及实例详解
Sep 26 Javascript
原生JS实现N级菜单的代码
May 21 Javascript
CountUp.js实现数字滚动增值效果
Oct 17 Javascript
使用preload预加载页面资源时注意事项
Feb 03 Javascript
el-table树形表格表单验证(列表生成序号)
May 31 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
Sep 09 Javascript
JavaScript实现网页计算器功能
Oct 29 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
PHP5中使用PDO连接数据库的方法
2010/08/01 PHP
php学习笔记之面向对象编程
2012/12/29 PHP
PHP中的表达式简述
2016/05/29 PHP
Laravel框架创建路由的方法详解
2019/09/04 PHP
PHP字符串和十六进制如何实现互相转换
2020/07/16 PHP
给js文件传参数(详解)
2014/07/13 Javascript
jQuery中fadeOut()方法用法实例
2014/12/24 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
2015/03/04 Javascript
JavaScript设计模式之代理模式详解
2017/06/09 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
2017/08/25 Javascript
js实现鼠标跟随运动效果
2020/08/02 Javascript
如何把vuejs打包出来的文件整合到springboot里
2018/07/26 Javascript
JavaScript进阶(三)闭包原理与用法详解
2020/05/09 Javascript
vue实现图片上传到后台
2020/06/29 Javascript
一篇文章看懂JavaScript中的回调
2021/01/05 Javascript
[46:02]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第二局
2016/02/28 DOTA
python批量修改文件后缀示例代码分享
2013/12/24 Python
利用Python实现网络测试的脚本分享
2017/05/26 Python
PyQt5每天必学之事件与信号
2018/04/20 Python
python3+PyQt5实现柱状图
2018/04/24 Python
Python3爬虫学习入门教程
2018/12/11 Python
PyCharm 在Windows的有用快捷键详解
2020/04/07 Python
TripAdvisor德国:全球领先的旅游网站
2017/12/07 全球购物
美国五金商店:Ace Hardware
2018/03/27 全球购物
大学生预备党员自我评价分享
2013/11/16 职场文书
小学门卫岗位职责
2013/12/17 职场文书
报社实习生自荐信
2014/01/24 职场文书
党校学习自我鉴定
2014/02/24 职场文书
应聘教师自荐书
2014/06/16 职场文书
干部个人对照检查材料
2014/08/25 职场文书
护士岗位竞聘书
2015/09/15 职场文书
如何书写你的职业生涯规划书?
2019/06/27 职场文书
OpenCV图像变换之傅里叶变换的一些应用
2021/07/26 Python
CSS实现两列布局的N种方法
2021/08/02 HTML / CSS
叶县这家生产军用电台的兵工厂,人称“四机部”,走出一上将
2022/02/18 无线电
详解pytorch创建tensor函数
2022/03/22 Python