解决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 相关文章推荐
jquery dialog键盘事件代码
Aug 01 Javascript
AngularJS入门教程之学习环境搭建
Dec 06 Javascript
使用js画图之饼图
Jan 12 Javascript
jQuery+formdata实现上传进度特效遇到的问题
Feb 24 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
Jun 06 Javascript
深入理解AngularJS中的ng-bind-html指令
Mar 27 Javascript
使用bootstrap插件实现模态框效果
May 10 Javascript
浅析vue.js数组的变异方法
Jun 30 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
Sep 12 Javascript
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
解决$store.getters调用不执行的问题
Nov 08 Javascript
Javascript原生ajax请求代码实例
Feb 20 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下HTTP Response中的Chunked编码实现方法
2008/11/19 PHP
实现PHP框架系列文章(6)mysql数据库方法
2016/03/04 PHP
基于PHP后台的Android新闻浏览客户端
2016/05/23 PHP
总结的一些PHP开发中的tips(必看篇)
2017/03/24 PHP
php实现页面纯静态的实例代码
2017/06/21 PHP
jQuery 解析xml文件
2009/08/09 Javascript
mailto的使用技巧分享
2012/12/21 Javascript
Javascript实现页面跳转的几种方式分享
2013/10/26 Javascript
jquery实现先淡出再折叠收起的动画效果
2015/08/07 Javascript
js实现简单的网页换肤效果
2017/01/18 Javascript
jquery版轮播图效果和extend扩展
2017/07/18 jQuery
JS按条件 serialize() 对应标签的使用方法
2017/07/24 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
2017/08/21 Javascript
微信小程序实现页面跳转传值的方法
2017/10/12 Javascript
vue 自定义指令自动获取文本框焦点的方法
2018/08/25 Javascript
Bootstrap-table使用footerFormatter做统计列功能
2018/09/07 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
2019/05/14 Javascript
layui 实现table翻页滚动条位置保持不变的例子
2019/09/05 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
2020/05/26 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
2020/06/01 Javascript
详解Vue3 Teleport 的实践及原理
2020/12/02 Vue.js
python发布模块的步骤分享
2014/02/21 Python
在Python的框架中为MySQL实现restful接口的教程
2015/04/08 Python
不知道这5种下划线的含义,你就不算真的会Python!
2018/10/09 Python
python集合是否可变总结
2019/06/20 Python
python自动化测试无法启动谷歌浏览器问题
2019/10/10 Python
tensorflow:指定gpu 限制使用量百分比,设置最小使用量的实现
2020/02/06 Python
如何使用html5与css3完成google涂鸦动画
2012/12/16 HTML / CSS
都柏林通行卡/城市通票:The Dublin Pass
2020/02/16 全球购物
介绍一下sql server的安全性
2014/08/10 面试题
升学宴家长答谢词
2015/09/29 职场文书
2016春季幼儿园开学寄语
2015/12/03 职场文书
银行服务理念口号
2015/12/25 职场文书
如何用python反转图片,视频
2021/04/24 Python
Mysql 如何合理地统计一个数据库里的所有表的数据量
2022/04/18 MySQL
Java实现贪吃蛇游戏的示例代码
2022/09/23 Java/Android