解决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 变量命名规则
Sep 23 Javascript
jQuery学习笔记 操作jQuery对象 属性处理
Sep 19 Javascript
jQuery消息提示框插件Tipso
May 04 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
Apr 06 Javascript
JavaScript必看小技巧(必看)
Jun 07 Javascript
微信小程序 出现错误:{&quot;baseresponse&quot;:{&quot;errcode&quot;:-80002,&quot;errmsg&quot;:&quot;&quot;}}解决办法
Feb 23 Javascript
vue.js国际化 vue-i18n插件的使用详解
Jul 07 Javascript
浅谈Node Inspector 代理实现
Oct 19 Javascript
通过JS深度判断两个对象字段相同
Jun 14 Javascript
Vue请求java服务端并返回数据代码实例
Nov 28 Javascript
Node Mongoose用法详解【Mongoose使用、Schema、对象、model文档等】
May 13 Javascript
js实现鼠标点击飘爱心效果
Aug 19 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上传文件,创建递归目录的实例代码
2013/10/18 PHP
php通过strpos查找字符串出现位置的方法
2015/03/17 PHP
PHP实现动态柱状图改进版
2015/03/30 PHP
基于Jquery实现表格动态分页实现代码
2011/06/21 Javascript
『jQuery』取指定url格式及分割函数应用
2013/04/22 Javascript
js中的事件捕捉模型与冒泡模型实例分析
2015/01/10 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
2015/11/05 Javascript
关于在Servelet中如何获取当前时间的操作方法
2016/06/28 Javascript
14 个折磨人的 JavaScript 面试题
2016/08/08 Javascript
BootStrap 模态框实现刷新网页并关闭功能
2017/01/04 Javascript
获取IE浏览器Cookie信息的方法
2017/01/23 Javascript
Vue+SpringBoot开发V部落博客管理平台
2017/12/27 Javascript
手写Node静态资源服务器的实现方法
2018/03/20 Javascript
Vue父子组件双向绑定传值的实现方法
2018/07/31 Javascript
Elasticsearch实现复合查询高亮结果功能
2019/09/10 Javascript
Javascript 关于基本类型和引用类型的个人理解
2019/11/01 Javascript
Vue实现简单的跑马灯
2020/05/25 Javascript
Python对列表去重的多种方法(四种方法)
2017/12/05 Python
纯python实现机器学习之kNN算法示例
2018/03/01 Python
python实现输入的数据在地图上生成热力图效果
2019/12/06 Python
深入了解Python enumerate和zip
2020/07/16 Python
python使用selenium爬虫知乎的方法示例
2020/10/28 Python
python如何写个俄罗斯方块
2020/11/06 Python
使用CSS3实现input多选框自定义样式的方法示例
2019/07/19 HTML / CSS
中国最大隐形眼镜网上商城:视客眼镜网
2016/10/30 全球购物
澳大利亚排名第一的儿童在线玩具商店:Toy Galaxy
2018/10/06 全球购物
大学团支书的自我评价分享
2013/12/14 职场文书
旅游业大学生创业计划书
2014/01/31 职场文书
小学生安全演讲稿
2014/04/25 职场文书
2016读书月活动心得体会
2016/01/14 职场文书
Python opencv缺陷检测的实现及问题解决
2021/04/24 Python
python 模块重载的五种方法
2021/04/24 Python
MySQL5.7并行复制原理及实现
2021/06/03 MySQL
详解MySQL多版本并发控制机制(MVCC)源码
2021/06/23 MySQL
Python Pandas读取Excel日期数据的异常处理方法
2022/02/28 Python
口袋妖怪冰系十大最强精灵,几何雪花排第七,第六类似北极熊
2022/03/18 日漫