遇到一個怪現象，由於配置參數是多實例的， 故采用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樣式弄亂，還請大俠賜教。