解决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与DropDownList 区别分析
Jan 01 Javascript
js防止表单重复提交实现代码
Sep 05 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
Jun 21 Javascript
javascript禁止访客复制网页内容的实现代码
Aug 05 Javascript
简单实现限制uploadify上传个数
Nov 16 Javascript
js删除局部变量的实现方法
Jun 25 Javascript
jQuery增加、删除及修改select option的方法
Aug 19 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
Sep 17 Javascript
Vue组件实现触底判断
Jun 26 Javascript
Webpack中loader打包各种文件的方法实例
Sep 03 Javascript
JavaScript canvas仿代码流瀑布
Feb 10 Javascript
JS继承实现方法及优缺点详解
Sep 02 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
javascript Demo模态窗口
2009/12/06 Javascript
javascript textarea光标定位方法(兼容IE和FF)
2011/03/12 Javascript
js 调用父窗口的具体实现代码
2013/07/15 Javascript
jQuery实现菜单式图片滑动切换
2015/03/14 Javascript
基于jquery实现人物头像跟随鼠标转动
2015/08/23 Javascript
Bootstrap每天必学之附加导航(Affix)插件
2016/04/25 Javascript
NodeJS的Promise的用法解析
2016/05/05 NodeJs
Three.js实现浏览器变动时进行自适应的方法
2017/09/26 Javascript
微信小程序自定义prompt组件步骤详解
2018/06/12 Javascript
JS使用Date对象实时显示当前系统时间简单示例
2018/08/23 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
2018/09/03 Javascript
Vue中的methods、watch、computed的区别
2018/11/26 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
2019/01/09 jQuery
JS实现滑动拼图验证功能完整示例
2020/03/29 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
2020/05/09 Javascript
C#返回当前系统所有可用驱动器符号的方法
2015/04/18 Python
详解python之配置日志的几种方式
2017/05/22 Python
利用Python实现网络测试的脚本分享
2017/05/26 Python
《Python学习手册》学习总结
2018/01/17 Python
Linux下多个Python版本安装教程
2018/08/15 Python
pyqt远程批量执行Linux命令程序的方法
2019/02/14 Python
python os模块简单应用示例
2019/05/23 Python
解决python执行不输出系统命令弹框的问题
2019/06/24 Python
python读写配置文件操作示例
2019/07/03 Python
Tornado实现多进程/多线程的HTTP服务详解
2019/07/25 Python
Tensorflow 实现将图像与标签数据转化为tfRecord文件
2020/02/17 Python
照片礼物和装饰:MyPhoto
2019/11/02 全球购物
专业销售业务员求职信
2013/11/18 职场文书
2014年妇产科工作总结
2014/12/08 职场文书
2016暑期政治学习心得体会
2016/01/23 职场文书
工作报告范文
2019/06/20 职场文书
亲情作文之母爱
2019/09/25 职场文书
Pycharm 如何设置HTML文件自动补全代码或标签
2021/05/21 Python
分位数回归模型quantile regeression应用详解及示例教程
2021/11/02 Python
springboot中的pom文件 project报错问题
2022/01/18 Java/Android
openstack云计算keystone组件工作介绍
2022/04/20 Servers