• 解决IE下select标签innerHTML插入option的BUG(兼容


    在ie下面使用innerHTML来插入option选项的话,ie会去掉前面的<option>,并拆分成多个节点,这样会造成select的出错
     

    前言:
    这是一个老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);

  • 相关阅读:
    if控制器+循环控制器+计数器,控制接口分支
    前置处理器
    逻辑控制器
    配置元件
    基础元件
    docker etcdctl报错:etcdctl No help topic for 'put'
    celery定时执行ansible api返回为空的问题
    Ansible+Jenkins+Gitlab搭建及配置
    进击的Python【第十六章】:Web前端基础之jQuery
    进击的Python【第十五章】:Web前端基础之DOM
  • 原文地址:https://www.cnblogs.com/caicaizi/p/5005994.html
Copyright © 2020-2023  润新知