解决IE下select标签innerHTML插入option的BUG(兼容
前言:
这是一个老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
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]);
}
};
使用:
END
到这里就结束了,在这里向大家推荐一个我自己写的js框架,上面的这个方法集成在框架里面了
使用:b$('obj').addOption(arg);
解决IE下select标签innerHTML插入option的BUG(兼容的更多相关文章
- 解决IE下a标签点击有虚线边框的问题
解决IE下a标签点击有虚线边框的问题 关键词:IE去除虚线边框.IE解决a标签虚线问题 先看看IE下,a标签出现的虚线边框问题: (上面中,红线包裹的就是一个翻页的按钮,按钮实际是hml的a标签做的, ...
- 解决IE下select option不支持display none样式
万恶的IE,option竟然不支持display样式,想到的解决思路有二个: 1.ajax联动查询 2.jQuery的remove().after()方法 方法1的不好之处是初始页面,需要显示全部IP ...
- 解决IE6下select显示在弹出框上问题
利用定位position:absolute;z-index:1;和iframe[z-index:-1]来解决此问题,最好根据需要加上: border='0' frameborder='0' scrol ...
- 转载:解决IE下a标签会触发window.onbeforeunload的问题
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- 解决IE6下a标签的onclick事件里的超链接不跳转问题
今天遇到个很诡异的问题,就是<a href="javascript:void(0);" onclick="window.location=url"> ...
- js中select标签中的option选择
f1 = function () { //var selected_val = document.getElementById(test).value; var obj = document.getE ...
- 用jquery获取select标签中选中的option值及文本
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- JS实现列表移动(通过DOM操作select标签)
JS小例题 学习内容: 需求 总结: 学习内容: 需求 用 JavaScript 实现 select 标签的移动 实现代码 <!DOCTYPE html PUBLIC "-//W3C/ ...
- 解决Select标签的Option在IE浏览中display:none不生效的问题
页面的Select标签,需要控制Select的Option不需要显示,根据条件来隐藏某些Option选项. 正常情况下使用hide()就能实现,hide()方法实际是给Option加上display属 ...
随机推荐
- grafana dashboard的导入导出
grafana的官方提供了很多社区或者官方设置的漂亮的dashboard,地址如下: 点击打开链接 导入图表大大节省了我们配置监控的时间,非常方便. 以linux host overview为例,首先 ...
- python3:定时执行自动化测试脚本
转载请注明出处:https://www.cnblogs.com/shapeL/p/9172990.html 1.windows任务计划定时执行脚本 (1)创建 .bat 文件,执行脚本的命令(inte ...
- 【论文解读】行人检测:What Can Help Pedestrian Detection?(CVPR'17)
前言 本篇文章出自CVPR2017,四名作者为Tsinghua University,Peking University, 外加两名来自Megvii(旷视科技)的大佬. 文章中对能够帮助行人检测的ex ...
- Pycharm出现的部分快捷键无效问题及解决办法
为了进行python开发,下载了Pycharm.但是发现启动后,执行ctrl+c和ctrl+v等快捷键都无法生效. 网上搜索了下,参考https://blog.csdn.net/c2366994582 ...
- Spring的事件发布机制
一:Spring的事件发布 ApplicationContext提供了针对Bean的事件传播功能,其中的主角是publishEvent()方法,通过这个方法可以将事件通知给系统内的监听器(需实现App ...
- HDU2037:今年暑假不AC
Problem Description "今年暑假不AC?" "是的." "那你干什么呢?" "看世界杯呀,笨蛋!" & ...
- 51Nod:1086背包问题 V2
1086 背包问题 V2 基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题 有N种物品,每种物品的数量为C1,C2......Cn.从中任选若干件放在容量为W的背包里 ...
- Linux下的Nginx、php、mysql、apache部署
待补充,先搞几个博客链接: https://www.cnblogs.com/Candies/p/8282934.html http://sujianjob.com/2017/12/18/yum%E5% ...
- tomcat源码阅读之单点登录
一.SSO概念: 单点登录,Single Sign-On,简写为 SSO,是一个用户认证的过程,允许用户一次性进行认证后,就可访问系统中不同的应用:而无需要访问每个应用时,都重新输入用户和密码. 实现 ...
- 【转】每天一个linux命令(42):kill命令
原文网址:http://www.cnblogs.com/peida/archive/2012/12/20/2825837.html Linux中的kill命令用来终止指定的进程(terminate a ...