遇到一个怪现象，由于配置参数是多实例的， 故采用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>
补充一种另外一种解决方法， 不使用向select中append option，
而将select整体替换为 “<select><option></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']"); var selectStr = "<select>" + "<option value='auto'>auto</option>" + "<option value='1'>1</option>" + "<option value='2'>2</option>" + "</select>"; //console.log(selectStr); $(selectStr).replaceAll($("select", temp)); //$("select", temp).replaceWith(selectStr); alert("option len="+$("option", $("select", temp)).length) }); $("[name='template']").clone(true).appendTo("body"); </script> </body> </html>
与大家分享下吧， 至于JQuery克隆为啥会把select样式弄乱，还请大侠赐教。