扫码关注官方订阅号
84669人学习
65727人学习
82984人学习
467778人学习
498837人学习
471966人学习
256484人学习
152542人学习
224170人学习
139536人学习
81804人学习
85022人学习
11944人学习
20001人学习
60816人学习
5487人学习
15007人学习
2150人学习
6980人学习
194925人学习
359900人学习
1142人学习
19058人学习
3206人学习
180550人学习
48569人学习
17603人学习
40936人学习
1049人学习
750人学习
32909人学习
前言: 这是一个老bug了,现在提供一个完美解决方案。由于我一直是用createElement来创建动态的option并添加,所以一直没有遇到这个问题,但是每个人写代码风格不同,有的人就喜欢写字符串形式的标签并用innerHTML插入,这不就有问题了,为了方便不同编码风格的人,我封装了一个方法,用于解决ie的这个bug和兼容5大浏览器,这样大家都可以用一个方法来实现不同的风格,便于维护管理。 bug描述: 在ie下面使用innerHTML来插入option选项的话,ie会去掉前面的,并拆分成多个节点,这样会造成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 = '' + arg + ''; var slt = b$.parseDom(str)[0]; for (var i = 0, num = slt.length; i obj.appendChild(slt[0]); } }; 使用: 复制代码 代码如下: addOption(sltObj, 'a'); END 到这里就结束了,在这里向大家推荐一个我自己写的js框架,上面的这个方法集成在框架里面了 使用:b$('obj').addOption(arg);
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
扫描下载App
Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
精品班
技术支持
技术咨询
学习群
会员优惠
返回顶部