解决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 相关文章推荐
网站404页面3秒后跳到首页的实例代码
Aug 16 Javascript
js实现简洁大方的二级下拉菜单效果代码
Sep 01 Javascript
Javascript之BOM(window对象)详解
May 25 Javascript
基于JQuery的购物车添加删除以及结算功能示例
Mar 08 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
Jul 10 Javascript
最新Javascript程序员面试试题和解题方法
Nov 23 Javascript
vue 虚拟dom的patch源码分析
Mar 01 Javascript
Vue.js组件高级特性实例详解
Dec 24 Javascript
小程序中英文混合排序问题解决
Aug 02 Javascript
基于javascript原生判断DOM是否加载完毕
Oct 14 Javascript
vue 防止页面加载时看到花括号的解决操作
Nov 09 Javascript
vue-cli4.0多环境配置变量与模式详解
Dec 30 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设计模式 Factory(工厂模式)
2011/06/26 PHP
php的大小写敏感问题整理
2011/12/29 PHP
php curl_init函数用法
2014/01/31 PHP
thinkphp3.2.2前后台公用类架构问题分析
2014/11/25 PHP
PHP使用Redis实现防止大并发下二次写入的方法
2017/10/09 PHP
利用PHP判断是手机移动端还是PC端访问的函数示例
2017/12/14 PHP
php常用日期时间函数实例小结
2019/07/04 PHP
兼容Mozilla必须知道的知识。
2007/01/09 Javascript
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
2009/08/04 Javascript
javascript setTimeout和setInterval 的区别
2009/12/08 Javascript
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
2011/07/28 Javascript
JS构造函数与原型prototype的区别介绍
2016/07/04 Javascript
angularjs实现文字上下无缝滚动特效代码
2016/09/04 Javascript
浅析location.href跨窗口调用函数
2016/11/22 Javascript
js 动态生成json对象、时时更新json对象的方法
2016/12/02 Javascript
jQuery联动日历的实例解析
2016/12/02 Javascript
Vue.js实战之组件的进阶
2017/04/04 Javascript
原生JavaScrpit中异步请求Ajax实现方法
2017/11/03 Javascript
10行原生JS实现文字无缝滚动(超简单)
2018/01/02 Javascript
JS中Map和ForEach的区别
2018/02/05 Javascript
vue基于mint-ui实现城市选择三级联动
2020/06/30 Javascript
Koa日志中间件封装开发详解
2019/03/09 Javascript
微信小程序设置滚动条过程详解
2019/07/25 Javascript
javscript 数组扁平化的实现
2020/02/03 Javascript
Vue 请求传公共参数的操作
2020/07/31 Javascript
[03:48]大碗DOTA
2019/07/25 DOTA
Python的SQLAlchemy框架使用入门
2015/04/29 Python
Python实现统计单词出现的个数
2015/05/28 Python
详解Python中open()函数指定文件打开方式的用法
2016/06/04 Python
详解 Python 与文件对象共事的实例
2017/09/11 Python
利用Storage Event实现页面间通信的示例代码
2018/07/26 HTML / CSS
味多美官网:蛋糕订购,100%使用天然奶油
2017/11/10 全球购物
奥巴马就职演讲稿
2014/05/15 职场文书
市委常委班子党的群众路线教育实践活动整改措施
2014/10/02 职场文书
医院营销工作计划
2015/01/16 职场文书
2015年三年级班主任工作总结
2015/05/21 职场文书