IE8下JQuery clone 出的select元素使用append新增option異常解決記錄

weixin_33941350發表於2014-05-08

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

 

相關文章