解决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);

时间: 2024-12-11 04:55:23

解决IE下select标签innerHTML插入option的BUG(兼容的相关文章

Python+Selenium(3):Select 2插件下select标签下的option选择

现在很流行用Select 2 插件给dropdown list添加效果,那么<Select>下的<option>用selenium的Select中select().select_by_index类似的方法就不能选到相应的元素了. 这时候用css路径比较好.找到<li>标签就可以定位到相应的Option.

select标签新增选项option、响应onchange事件

[问题描述] (1)下拉菜单选中的食物在最下面显示: (2)在添加食物的输入框中输入文本,点击“添加选项”按钮将文本添加到下拉菜单的选项中. [解决] (1) <select id="food_selection" onchange="func(this.value)"> <option value="汉堡">汉堡</option> <option value="意大利面">意大

关于&lt;s:select&gt; 标签

struts2的select标签中,常用的有以下几个属性: (1)struts2中的select 标签中,必须设置的属性只有一个,即是list. (2)select标签的list中必须有值,不然会报错.如果没有值,可以加上headerKey, headerValue,这样就可以通过了.如: xml 代码<s:select   name="geElement.childType" list="childTypeList" listKey="key&qu

struts中select标签的使用

1 静态生成 <s:select name="user.sex" list="#{'0':'男','1':'女'}" label="性别" headerKey="" headerValue="请选择性别"></s:select> 注解:这里从页面来静态(也就是在页面中写死啦)构造下拉选项,关键点是list="#{'0':'男','1':'女'}" 通过它实现的se

struts2中&lt;s:select&gt;标签的使用

1 静态生成 <s:select name="user.sex" list="#{'0':'男','1':'女'}" label="性别" headerKey="" headerValue="请选择性别"></s:select> 注解:这里从页面来静态(也就是在页面中写死啦)构造下拉选项,关键点是list="#{'0':'男','1':'女'}" 通过它实现的se

struts2中,&lt;s:select&gt;标签的使用

一.select原始生成下拉框的方法: <select class="form-control" name="user.roleId"  >       <option value="">--请选择--</option>       <s:iterator value="roleList" var="role" >         <option val

struts2中&lt;s:select&gt;标签的动态使用

需要将后台传过来的userlist变成一个下拉菜单,于是想到使用<s:select>,但设置属性设置了好久,在此记下来. JSP代码: <s:select label="关系数据" name="relationone" id="s1" list="userlist" listKey="relationname" listValue="relationname" styl

each函数遍历select标签下的所有option选项

如下: <select id="asd" name="sweet1"> <option value=1>--四川--</option> <option value=2>--广东--</option> </select> <script>function eachoption(){ $("#asd option").each( function(){ alert($

jQ给下拉框绑定事件,为什么要绑定在框(select标签)上,而不是绑定在选项(option标签)上

这是我在学习锋利的 jquery 书中 5.1.4 的代码时遇到的一个小问题,源代码如下: <head> <style type="text/css"> * { margin:0; padding:0; } div.centent { float:left; text-align: center; margin: 10px; } span { display:block; margin:2px 2px; padding:4px 10px; background: