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

時間 2019-11-19

標籤 ie8 jquery clone select 元素使用 append 添加 option 異常解決記錄欄目瀏覽器简体版

原文原文鏈接

　　遇到一個怪現象，因爲配置參數是多實例的，故採用JQuery對模板HTML代碼進行clone，css

HTML代碼中包括select標籤，在克隆以後須要對select進行添加option。html

在firefox和chrome瀏覽器上都沒有問題，在IE10下也沒有問題，jquery

可是在IE8下就出現問題，使用append添加option後，IE8上就顯示不出來新添加option。chrome

　　示例代碼以下，對於clone出的第二個select有問題，可是經過打印，發現添加後的option數目是正確的3個。瀏覽器

這個就太使人費解了。app

<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，是沒有這個問題的。ide

細細思討懷疑多是clone出來的副本樣式渲染上沒有更新，this

故在select在填充完option後，主動作一次隱藏後再次顯示的動做，select恢復正常。spa

<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控件顯示不變的方法。.net

　　在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>