解决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中万恶的function实例分析
May 25 Javascript
JS获取页面input控件中所有text控件并追加样式属性
Feb 25 Javascript
jquery复选框checkbox实现删除前判断
Apr 20 Javascript
在线所见即所得HTML编辑器的实现原理浅析
Apr 25 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
Jan 28 Javascript
Javascript中的prototype与继承
Feb 06 Javascript
JS实现带导航城市列表以及输入搜索功能
Jan 04 Javascript
Vue2.0 事件的广播与接收(观察者模式)
Mar 14 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
May 01 Javascript
es6基础学习之解构赋值
Dec 10 Javascript
JS学习笔记之数组去重实现方法小结
May 29 Javascript
jQuery实现简单全选框
Sep 13 jQuery
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
phpMyAdmin 链接表的附加功能尚未激活的问题
2010/08/01 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
thinkPHP5.1框架路由::get、post请求简单用法示例
2019/05/06 PHP
模仿JQuery.extend函数扩展自己对象的js代码
2009/12/09 Javascript
当鼠标移动时出现特效的JQuery代码
2013/11/08 Javascript
js通过八个点 拖动改变div大小的实现方法
2014/03/05 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
2014/12/15 Javascript
javascript操作符&quot;!~&quot;详解
2015/02/10 Javascript
浅谈javascript语法和定时函数
2015/05/03 Javascript
jquery mobile开发常见问题分析
2016/01/21 Javascript
高效利用Angular中内置服务$http、$location等
2016/03/22 Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
2016/10/10 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
原生JS实现层叠轮播图
2017/05/17 Javascript
vue.js 实现输入框动态添加功能
2018/06/25 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
2018/10/26 Javascript
Python线性回归实战分析
2018/02/01 Python
解决pycharm运行出错,代码正确结果不显示的问题
2018/11/30 Python
Python 使用多属性来进行排序
2019/09/01 Python
对Pytorch中Tensor的各种池化操作解析
2020/01/03 Python
html5实现canvas阴影效果示例
2014/05/07 HTML / CSS
超30万乐谱下载:Musicnotes.com
2016/09/24 全球购物
惠普加拿大在线商店:HP加拿大
2017/09/15 全球购物
西班牙著名的珠宝首饰品牌:P D PAOLA
2018/09/15 全球购物
下述程序的作用是计算机数组中的最大元素值及其下标
2012/11/26 面试题
css animation配合SVG制作能量流动效果
2021/03/24 HTML / CSS
在职人员函授期间自我评价分享
2013/11/08 职场文书
外贸销售员求职的自我评价
2013/11/23 职场文书
高二生物教学反思
2014/01/27 职场文书
幼儿园课题方案
2014/06/09 职场文书
小学生勤俭节约演讲稿
2014/08/28 职场文书
2014年店长工作总结
2014/11/17 职场文书
2015年教师节主持词
2015/07/03 职场文书
2015教师个人师德工作总结
2015/10/23 职场文书
在HTML5 localStorage中存储对象的示例代码
2021/04/21 Javascript
MySQL 数据类型选择原则
2021/05/27 MySQL