解决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中匿名函数,函数直接量和闭包
May 08 Javascript
javascript document.referrer 用法
Apr 30 Javascript
javascript 得到文件后缀名的思路及实现
May 09 Javascript
技术男用来对妹子表白的百度首页
Jul 23 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
Jul 08 Javascript
JavaScript面试题大全(推荐)
Sep 22 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
浅谈原生JS中的延迟脚本和异步脚本
Jul 12 Javascript
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
利用vue和element-ui设置表格内容分页的实例
Mar 02 Javascript
javascript 设计模式之享元模式原理与应用详解
Apr 08 Javascript
如何在vue-cli中使用css-loader实现css module
Jan 07 Vue.js
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文件上传原理简单分析
2011/05/29 PHP
php文件缓存类汇总
2014/11/21 PHP
php实现压缩合并js的方法【附demo源码下载】
2016/09/22 PHP
PHP常用操作类之通信数据封装类的实现
2017/07/16 PHP
iframe 父窗口和子窗口相互的调用方法集锦
2010/12/15 Javascript
js选取多个或单个元素的实现代码(用class)
2012/08/22 Javascript
jquery的map与get方法详解
2013/11/04 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
2013/11/26 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
2016/03/08 Javascript
jquery按回车键实现表单提交的简单实例
2016/05/25 Javascript
js浏览器html5表单验证
2016/10/17 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
2016/10/17 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
2020/03/26 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
2017/09/07 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
2018/11/12 Javascript
VUE中使用MUI方法
2019/02/12 Javascript
详解使用uni-app开发微信小程序之登录模块
2019/05/09 Javascript
vue组件间通信六种方式(总结篇)
2019/05/15 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
2019/05/30 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛 5 24 iG VS DK
2014/05/26 DOTA
python错误:AttributeError: 'module' object has no attribute 'setdefaultencoding'问题的解决方法
2014/08/22 Python
Python实现数据库编程方法详解
2015/06/09 Python
Python实现屏幕截图的代码及函数详解
2016/10/01 Python
python 获取文件下所有文件或目录os.walk()的实例
2018/04/23 Python
python实现简单五子棋游戏
2019/06/18 Python
PyCharm 创建指定版本的 Django(超详图解教程)
2019/06/18 Python
python多环境切换及pyenv使用过程详解
2019/09/27 Python
Python 使用 prettytable 库打印表格美化输出功能
2019/12/26 Python
Sentry错误日志监控使用方法解析
2020/11/12 Python
方太官方网上商城:销售方太抽油烟机、燃气灶、消毒柜等
2017/01/17 全球购物
测绘工程专业个人自我评价
2013/12/01 职场文书
艺术设计专业个人求职信范文
2013/12/11 职场文书
土建施工员岗位职责
2015/04/11 职场文书
读《推着妈妈去旅行》有感1500字
2019/10/15 职场文书
把77A收信机改造成收音机
2022/04/05 无线电
docker 制作mysql镜像并自动安装
2022/05/20 Servers