解决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 window.opener的用法分析
Apr 07 Javascript
javascript实现上传图片并预览的效果实现代码
Apr 11 Javascript
Eclipse去除js(JavaScript)验证错误
Feb 11 Javascript
JS获取几种URL地址的方法小结
Feb 26 Javascript
jQuery 获取兄弟元素的几种不错方法
May 23 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
Mar 03 Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
Mar 31 Javascript
javascript常用方法总结
May 14 Javascript
js自定义回调函数
Dec 13 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
Jun 24 Javascript
详解Node.js读写中文内容文件操作
Oct 10 Javascript
JS实现灯泡开关特效
Mar 30 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
2021年最新CPU天梯图
2021/03/04 数码科技
PHP制作万年历
2015/01/07 PHP
PHP生成静态HTML文档实现代码
2016/06/23 PHP
使用jQuery的ajax功能实现的RSS Reader 代码
2009/09/03 Javascript
js语法学习之判断一个对象是否为数组
2014/05/13 Javascript
浅谈jQuery事件绑定原理
2015/01/02 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
2015/07/01 Javascript
input点击后placeholder中的提示消息消失
2016/01/15 Javascript
实例讲解JS中setTimeout()的用法
2016/01/28 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
2016/07/07 Javascript
微信小程序 UI与容器组件总结
2017/02/21 Javascript
js遍历获取表格内数据的方法(必看)
2017/04/06 Javascript
[02:36]DOTA2英雄基础教程 斯拉克
2013/11/29 DOTA
[40:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs TNC
2018/04/01 DOTA
浅谈Python中copy()方法的使用
2015/05/21 Python
python类继承用法实例分析
2015/05/27 Python
Python语法快速入门指南
2015/10/12 Python
windows下安装python的C扩展编译环境(解决Unable to find vcvarsall.bat)
2018/02/21 Python
python 获取utc时间转化为本地时间的方法
2018/12/31 Python
Python按钮的响应事件详解
2019/03/04 Python
Falsk 与 Django 过滤器的使用与区别详解
2019/06/04 Python
python 自定义装饰器实例详解
2019/07/20 Python
详解Matplotlib绘图之属性设置
2019/08/23 Python
Pytorch之保存读取模型实例
2019/12/30 Python
python应用Axes3D绘图(批量梯度下降算法)
2020/03/25 Python
解决Python中报错TypeError: must be str, not bytes问题
2020/04/07 Python
Python unittest框架操作实例解析
2020/04/13 Python
python selenium 获取接口数据的实现
2020/12/07 Python
如何使用canvas绘制可移动网格的示例代码
2020/12/14 HTML / CSS
ZINVO手表官网:男士和女士手表
2019/03/10 全球购物
营销专业应届生求职信
2013/11/26 职场文书
2015年扶贫帮困工作总结
2015/05/20 职场文书
假期读书倡议书3篇
2019/08/19 职场文书
Nginx已编译的nginx-添加新模块
2021/04/01 Servers
Nginx的基本概念和原理
2022/03/21 Servers
Win11查看设备管理器
2022/04/19 数码科技