IE8下JQuery clone 出的select元素使用append添加option异常解决记录

  遇到一个怪现象,由于配置参数是多实例的, 故采用JQuery对模板HTML代码进行clone,

HTML代码中包括select标签, 在克隆之后需要对select进行添加option。

在firefox和chrome浏览器上都没有问题,在IE10下也没有问题,

但是在IE8下就出现问题,使用append添加option后,IE8上就显示不出来新添加option。

  示例代码如下,对于clone出的第二个select有问题,但是通过打印,发现添加后的option数目是正确的3个。

这个就太令人费解了。


<html>
<head>
<script src="./jquery.js"></script>
</head>
<body>
<div name="template">
<select>
</select>
<input type="button" name="testBtn" value="click me">
</div>
<script>

$("[name=‘testBtn‘]").on("click",function(){
alert("enter")
var temp = $(this).parents("[name=‘template‘]");
$("select", temp).empty();

$("select", temp).append("<option value=‘auto‘>auto</option>");
$("select", temp).append("<option value=‘1‘>1</option>");
$("select", temp).append("<option value=‘2‘>2</option>");
alert("option len="+$("option", $("select", temp)).length)
});

$("[name=‘template‘]").clone(true).appendTo("body");
</script>
</body>
</html>

  点击第二个select,下拉框内容页显示不出来,第一个select是原始select,是没有这个问题的。

细细思讨怀疑可能是clone出来的副本样式渲染上没有更新,

故在select在填充完option后, 主动做一次隐藏后再次显示的动作,select恢复正常。


<html>
<head>
<script src="./jquery.js"></script>
</head>
<body>
<div name="template">
<select>
</select>
<input type="button" name="testBtn" value="click me">
</div>
<script>

$("[name=‘testBtn‘]").on("click",function(){
alert("enter")
var temp = $(this).parents("[name=‘template‘]");
$("select", temp).empty();

$("select", temp).append("<option value=‘auto‘>auto</option>");
$("select", temp).append("<option value=‘1‘>1</option>");
$("select", temp).append("<option value=‘2‘>2</option>");
alert("option len="+$("option", $("select", temp)).length)
$("select", temp).hide().show()
});

$("[name=‘template‘]").clone(true).appendTo("body");
</script>
</body>
</html>

  但是这种规避方法,似乎也不好,每次给select替换option,都需要隐藏后再显示,给用户视觉带来冲击,控件闪烁,牺牲网页的可访问性(有违WCAG),故寻找其他保持select控件显示不变的方法。

  在http://bbs.csdn.net/topics/390559926找到相同问题讨论中的一则说明:

IE 下的 option 不能当普通标签来看,appendChild,innerHTML...都不能用
通过可以 select.options.app( new Option(text,value)   )

  真是高人,实验了appendChild确实不能添加option,于是借鉴此思路,为了保持JQuery append option string的写法,
即时不改变原有代码,通过新添加一个无用option,然后再删除它,来达到恢复select样式的目的。

  示例代码如下:


<html>
<head>
<script src="./jquery.js"></script>
</head>
<body>
<div name="template">
<select>
<option>jj</option>
</select>
<input type="text" value="heeh">
<input type="button" name="testBtn" value="click me">
</div>
<script>

$("[name=‘testBtn‘]").on("click",function(){
//alert("enter")
var temp = $(this).parents("[name=‘template‘]");
$("select", temp).empty();

$("select", temp).append("<option value=‘auto‘>auto</option>");
$("select", temp).append("<option value=‘1‘>1</option>");
$("select", temp).append("<option value=‘2‘>2</option>");
//alert("option len="+$("option", $("select", temp)).length);

//$("select", temp).hide().show()

var select = document.getElementsByTagName("select")[1];
var option = document.createElement("option");
select.add( option );
select.remove(select.length-1);
});

$("[name=‘template‘]").clone(true).appendTo("body");
$("input[type=‘text‘]").eq(1).val("reset")
</script>
</body>
</html>

  这种方法也是属于偏的方法,既然怀疑是样式问题,我想还是使用样式的方法来纠正,

使用IE8调试器审查两个select看不出有啥异样,瞎试吧,select是行内元素,display:inline赋值试下果然OK:)

但是第一次OK, 第二次之后还是有问题的,应该是每次给option添加后,需要出发样式的变化,才能解决这个问题,

于是先赋值 inline-block 后改为inline,可以彻底解决这个问题。推荐这个方法。


<html>
<head>
<script src="./jquery.js"></script>
</head>
<body>
<div name="template">
<select>
<option>jj</option>
</select>
<input type="text" value="heeh">
<input type="button" name="testBtn" value="click me">
</div>
<script>

$("[name=‘testBtn‘]").on("click",function(){
//alert("enter")
var temp = $(this).parents("[name=‘template‘]");
$("select", temp).empty();

$("select", temp).append("<option value=‘auto‘>auto</option>");
$("select", temp).append("<option value=‘1‘>1</option>");
$("select", temp).append("<option value=‘2‘>2</option>");
//alert("option len="+$("option", $("select", temp)).length);

//$("select", temp).hide().show()

/*
var select = document.getElementsByTagName("select")[1];
var option = document.createElement("option");
select.add( option );
select.remove(select.length-1);*/

$("select", temp).css("display", "inline-block");
$("select", temp).css("display", "inline");

});

$("[name=‘template‘]").clone(true).appendTo("body");
$("input[type=‘text‘]").eq(1).val("reset")
</script>
</body>
</html>

  与大家分享下吧, 至于JQuery克隆为啥会把select样式弄乱,还请大侠赐教。

时间: 2024-10-13 16:08:21

IE8下JQuery clone 出的select元素使用append添加option异常解决记录的相关文章

IE8下Jquery获取select选中的值的问题

我们一般使用jquery获取select时,一般这么用: <select id='a'>     <option selected='selected' value='1'> </select> var selectedValue = $("#a").val(); 在非IE8下,selectedValue的值为"1",typeof selectedValue 为"string". 在IE8下,selectedV

IE6,IE7,IE8下报JS错误:expected identifier, string or number的原因及解决的方法

今天在调试一个页面的时候遇到一个问题,在IE9下执行得非常好的脚本,在IE8里打开的时候弹出错误:expected identifier, string or number,依照经验,应该是定义对象的时候最后一个属性末尾跟了逗号,但检查一遍后没发现有这样的情况,后来细致看了一下报错的位置,发现有定义json对象属性时,属性名没实用引號括起来,于是加了上去再试,问题攻克了. 综上所述,当出现expected identifier, string or number的错误时,你首先应该检查在使用对象

IE6,IE7,IE8下报JS错误:expected identifier, string or number的原因及解决办法

今天在调试一个页面的时候遇到一个问题,在IE9下运行得很好的脚本,在IE8里打开的时候弹出错误:expected identifier, string or number,按照经验,应该是定义对象的时候最后一个属性末尾跟了逗号,但检查一遍后没发现有这种情况,后来仔细看了一下报错的位置,发现有定义json对象属性时,属性名没有用引号括起来,于是加了上去再试,问题解决了. 综上所述,当出现expected identifier, string or number的错误时,你首先应该检查在使用对象字面

ie8下jquery改变PNG的opacity出现黑边,ie6下png透明解决办法

目前互联网对于网页效果要求越来越高,不可避免的用到PNG图片,PNG分为几种格 式,PNG8 PNG24 PNG32,其中最常用的,也是显示效果和大小比较适中的则是PNG24,支持半透明,透明,颜色也非常丰富,但由于咱们国人使用IE系列或以IE为内核系列的浏览器占大多数,并且由于 WINDOWS XP在国内市场份额比较大,并且XP上好多人还在用IE6 IE7 IE8等浏览器,而这些浏览器对于PNG支持或多或少都有差距,IE6完全不支持PNG,IE7 IE8支持PNG不完全,在IE7 IE8下面对

IE8下jQuery改变png图片透明度时出现的黑边问题

png24格式的图片在用jQuery添加显示隐藏动画时发现,图片的半透明区域出现黑边? 在网上搜了搜主要有以下几种办法: 1.把图片保存成PNG-8格式. 2.把背景色一起切入并保存为JPG格式. 以上两种方法我试了试,好像效果并不好png8格式仍就会有黑边. 解决方法: 1.不要直接改变图片的透明度,而是给图片套个容器,去修改这个容器的透明度 2.给这个容器加个颜色相近的背景颜色(非常重要,解决bug的关键就在这一步,) 一般情况下,到此bug就解决了,如果还是有问题,请看下面: 3.给容器加

2015-07-22 JQuery 第二课(JQ元素获取,添加,删除,判断,遍历,取值,样式设置,改变对象,切换)

1.获取元素: 1).size(): 获取元素的个数. $(“img”).size():获取有多少个img. 2).eq():获取元素. $(“img[title]”).eq(1):获取第二个带有title属性的img标签. 也可以写作: $(“img[title]”)[1],此括号里的1代表索引1,所以是对应第二个,一般多用eq(). 3).get() :获得由选择器指定的DOM元素. x=$("p").get(0):获取第一个 p 元素的值. 4)index():获取某项标签的索引

ie7和ie8 select使用jquery clone不兼容处理

本文解决方案基于http://blog.csdn.net/zzx3q/article/details/8017794 在ie7和ie8下,用jquery clone复制一个select,复制的select是本体的select初始化时的一个副本,无法复制目前本体select选择. 解决方案: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert ti

jQuery on()方法绑定动态元素的点击事件无响应的解决办法

$('#check_all').on('click' , function(){ alert(1); }); $("#yujinlist").append(html); count++; } 以上代码执行时,点击#check_all时,alert一直没反应,后在网上查资料时,才知道on前面的元素也必须在页面加载的时候就存在于dom里面, 那原话是这样的: 支持给动态元素和属性绑定事件的是live和on,其中live在JQUERY 1.7之后就不推荐使用了.现在主要用on,使用on的时候

jquery选择器:获取父级元素、同级元素、子元素

jQuery的出现给广大开发者提供了不少的方便.从要自己一个一个敲代码,到直接调用方法,无疑大大地提高了网站开发的效率.而在jQuery中有一些方法非常的实用.下面就给大家介绍下jquery选择器:获取父级元素.同级元素.子元素的方法. 一.获取父级元素1.parent()获取指定元素的父级元素,注意:是最靠近指定元素的父级元素. 2.parents()获取指定元素的所有父级元素,注意:是所有的父级元素,包括body,html 二.获取同级元素1.next()获取指定元素的下一个同级元素(注意: