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>

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