解决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 相关文章推荐
如何在标题栏显示框架内页面的标题
Feb 03 Javascript
javascript 函数使用说明
Apr 07 Javascript
myEvent.js javascript跨浏览器事件框架
Oct 24 Javascript
禁止拷贝网页内容的js代码
Jan 22 Javascript
基于JS实现无缝滚动思路及代码分享
Jun 07 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
Aug 31 Javascript
web 屏蔽BackSpace键实例代码
Dec 24 Javascript
easyui-datagrid特殊字符不能显示的处理方法
Apr 12 Javascript
jquery tmpl模板(实例讲解)
Sep 02 jQuery
vue2.0获取鼠标位置的方法
Sep 13 Javascript
微信小程序实现图片选择并预览功能
Jul 25 Javascript
javascript实现数字时钟效果
Feb 06 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
模仿OSO的论坛(五)
2006/10/09 PHP
php自动适应范围的分页代码
2008/08/05 PHP
让Nginx支持ThinkPHP的URL重写和PATHINFO的方法分享
2011/08/08 PHP
php下利用curl判断远程文件是否存在的实现代码
2011/10/08 PHP
php设计模式之命令模式的应用详解
2013/05/21 PHP
实例讲解PHP设计模式编程中的简单工厂模式
2016/02/29 PHP
php自动提交表单的方法(基于fsockopen与curl)
2016/05/09 PHP
PHP常用函数之base64图片上传功能详解
2019/10/21 PHP
php接口隔离原则实例分析
2019/11/11 PHP
javascript eval函数深入认识
2009/02/21 Javascript
单独使用CKFinder选择图片的方法
2010/08/21 Javascript
jquery幻灯片插件bxslider样式改进实例
2014/10/15 Javascript
JavaScript简单实现弹出拖拽窗口(一)
2016/06/17 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
2016/06/20 Javascript
jQuery 限制输入字符串长度
2016/06/20 Javascript
JQueryMiniUI按照时间进行查询的实现方法
2017/06/07 jQuery
详解axios 全攻略之基本介绍与使用(GET 与 POST)
2017/09/15 Javascript
webpack3之loader全解析
2017/10/26 Javascript
微信小程序实现自上而下字幕滚动
2018/07/14 Javascript
一文看懂如何简单实现节流函数和防抖函数
2019/09/05 Javascript
Vue的双向数据绑定实现原理解析
2020/02/17 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
2020/09/11 Javascript
[47:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第二场 3月4日
2021/03/11 DOTA
python解决字典中的值是列表问题的方法
2013/03/04 Python
用PyInstaller把Python代码打包成单个独立的exe可执行文件
2018/05/26 Python
Python这样操作能存储100多万行的xlsx文件
2019/04/16 Python
详解django实现自定义manage命令的扩展
2019/08/13 Python
浅谈TensorFlow之稀疏张量表示
2020/06/30 Python
python中pow函数用法及功能说明
2020/12/04 Python
html5中使用hotcss.js实现手机端自适配的方法
2020/04/23 HTML / CSS
Aerosoles爱柔仕官网:美国舒软女鞋品牌
2017/07/17 全球购物
学院书画协会部门职责
2013/11/28 职场文书
送给客户微信问候语!
2019/07/04 职场文书
迎客户欢迎词三篇
2019/09/27 职场文书
Pytorch 如何加速Dataloader提升数据读取速度
2021/05/28 Python
Spring Boot项目传参校验的最佳实践指南
2022/04/05 Java/Android