解决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写的日历类(基于pj)
Dec 28 Javascript
jquery实现图片裁剪思路及实现
Aug 16 Javascript
用js代码改变单选框选中状态的简单实例
Dec 18 Javascript
ExtJS如何设置与获取radio控件的选取状态
Jan 22 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
May 03 Javascript
基于jQuery实现文本框缩放以及上下移动功能
Nov 24 Javascript
使用node.js搭建服务器
May 20 Javascript
webpack 2.x配置reactjs基本开发环境详解
Aug 08 Javascript
Vue上传组件vue Simple Uploader的用法示例
Aug 25 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
Jun 29 Javascript
Vue强制组件重新渲染的方法讨论
Feb 03 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
Apr 16 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
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
php实现解析xml并生成sql语句的方法
2018/02/03 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
Javascript的闭包
2009/12/31 Javascript
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
2010/04/27 Javascript
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
2012/06/22 Javascript
深入理解Javascript中的循环优化
2013/11/09 Javascript
表格奇偶行设置不同颜色的核心JS代码
2013/12/24 Javascript
JavaScript中pop()方法的使用教程
2015/06/09 Javascript
js实现鼠标点击文本框自动选中内容的方法
2015/08/20 Javascript
详解Angular6.0使用路由步骤(共7步)
2018/06/29 Javascript
js利用iframe实现选项卡效果
2020/08/09 Javascript
Python中元组,列表,字典的区别
2017/05/21 Python
使用anaconda的pip安装第三方python包的操作步骤
2018/06/11 Python
python3判断url链接是否为404的方法
2018/08/10 Python
使用python实现mqtt的发布和订阅
2019/05/05 Python
Python中typing模块与类型注解的使用方法
2019/08/05 Python
用openCV和Python 实现图片对比,并标识出不同点的方式
2019/12/19 Python
Python如何通过Flask-Mail发送电子邮件
2020/01/29 Python
Python使用configparser库读取配置文件
2020/02/22 Python
使用Python将xmind脑图转成excel用例的实现代码(一)
2020/10/12 Python
Python之Sklearn使用入门教程
2021/02/19 Python
css3学习心得分享
2013/08/19 HTML / CSS
CSS3+js实现简单的时钟特效
2015/03/18 HTML / CSS
波兰香水和化妆品购物网站:Notino.pl
2017/11/07 全球购物
德国最大的网上足球商店:11teamsports
2019/09/11 全球购物
荷兰美妆护肤品海淘网站:Beautinow(中文)
2020/11/22 全球购物
党课学习思想汇报
2014/01/02 职场文书
客户表扬信范文
2014/01/10 职场文书
动漫专业高职生职业生涯规划书
2014/02/15 职场文书
政风行风整改报告
2014/11/06 职场文书
违反工作规定检讨书范文
2014/12/14 职场文书
小浪底导游词
2015/02/12 职场文书
2016新年感言
2015/08/03 职场文书
Golang全局变量加锁的问题解决
2021/05/08 Golang
Elasticsearch 配置详解
2022/04/19 Java/Android