解决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 相关文章推荐
Document:getElementsByName()使用方法及示例
Oct 28 Javascript
javascript实现yield的方法
Nov 06 Javascript
Bootstrap每天必学之媒体对象
Nov 30 Javascript
ionic实现带字的toggle滑动组件
Aug 27 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
Jan 19 Javascript
Angular中ng-bind和ng-model的区别实例详解
Apr 10 Javascript
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
利用ECharts.js画K线图的方法示例
Jan 10 Javascript
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
jQuery实现高级检索功能
May 28 jQuery
js定义类的方法示例【ES5与ES6】
Jul 30 Javascript
jQuery中event.target和this的区别详解
Aug 13 jQuery
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或asp创建网页桌面快捷方式的代码
2010/03/23 PHP
PHP json_decode函数详细解析
2014/02/17 PHP
深入解析PHP的Yii框架中的缓存功能
2016/03/29 PHP
php添加数据到xml文件的简单例子
2016/09/08 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
分享14个很酷的jQuery导航菜单插件
2011/04/25 Javascript
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
2012/05/23 Javascript
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
2012/05/23 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
学习JavaScript事件流和事件处理程序
2016/01/25 Javascript
jQuery 遍历map()方法详解
2016/11/04 Javascript
通过命令行创建vue项目的方法
2017/07/20 Javascript
vue-cli项目中使用Mockjs详解
2018/05/14 Javascript
React项目动态设置title标题的方法示例
2018/09/26 Javascript
jquery实现动态创建form并提交的方法示例
2019/05/27 jQuery
vue动态子组件的两种实现方式
2019/09/01 Javascript
使用p5.js实现动态GIF图片临摹重现
2019/10/23 Javascript
微信小程序后端(java)开发流程的详细步骤
2019/11/13 Javascript
解决vue页面渲染但dom没渲染的操作
2020/07/27 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
2020/09/01 Javascript
[01:05:59]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
python实现逆序输出一个数字的示例讲解
2018/06/25 Python
Python编写合并字典并实现敏感目录的小脚本
2019/02/26 Python
python 基于wx实现音乐播放
2020/11/24 Python
Marc Jacobs官方网站:美国奢侈品牌
2017/08/29 全球购物
美国最受欢迎的度假目的地优惠套餐:BookVIP
2018/09/27 全球购物
DOUGLAS荷兰:购买香水和化妆品
2020/10/24 全球购物
金融专业大学生职业生涯规划范文
2014/01/16 职场文书
财务总经理岗位职责
2014/02/16 职场文书
书法兴趣小组活动总结
2014/07/07 职场文书
文明旅游倡议书
2015/04/28 职场文书
未婚证明范本
2015/06/15 职场文书
禁毒心得体会范文
2016/01/15 职场文书
2016年大学生党员承诺书
2016/03/24 职场文书
JavaScript 去重和重复次数统计
2021/03/31 Javascript
鸿蒙3.0体验感怎么样? 鸿蒙3.0系统评测向
2022/08/14 数码科技