遇到一个怪现象，由于配置参数是多实例的， 故采用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")[];

            var option = document.createElement("option");

            select.add( option );

            select.remove(select.length-);

        });

        $("[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样式弄乱，还请大侠赐教。

IE8下JQuery clone 出的select元素使用append添加option异常解决记录的更多相关文章

  1. ie8下jquery改变PNG的opacity出现黑边

    复制网上的,没有他们那个类型的博客,所以就直接复制了 这些天在做一个效果,鼠标经过,PNG图片由透明变成不透明,jquery代 码:$(element).animate({"opacity& ...

  2. ie8下jquery改变PNG的opacity出现黑边,ie6下png透明解决办法

    目前互联网对于网页效果要求越来越高,不可避免的用到PNG图片,PNG分为几种格 式,PNG8 PNG24 PNG32,其中最常用的,也是显示效果和大小比较适中的则是PNG24,支持半透明,透明,颜色也 ...

  3. ie8下input文字偏上select文字偏下

    1.ie8下input文字偏上 正常情况下input的显示情况如下 当设置input的高度时,就会出现文字不垂直居中偏上的情况,如图 解决方案 强input的行高line-height与其高度设置一致 ...

  4. ie8下jquery读取当前点击的标签位置错误，原因是里面有内容写了text-indent:-9999px

    今天写一地图的效果,鼠标点击对应的区域,弹出所点击区域的名字. 因为设计的区域名字有特殊效果,所以,在点击区域里面套了个标签写上区域名字用来识别,但是这个文字呢不同显示在页面上,所以就给 em 加个了 ...

  5. jquery 让select元素中的某个option被选中

    jquery 操作select 取值,设置选中值 博客分类: javaScript selecttextvalue取值设置选中值 比如 <select class="type" ...

  6. IE8下jQuery改变png图片透明度时出现的黑边问题

    png24格式的图片在用jQuery添加显示隐藏动画时发现,图片的半透明区域出现黑边? 在网上搜了搜主要有以下几种办法: 1.把图片保存成PNG-8格式. 2.把背景色一起切入并保存为JPG格式. 以 ...

  7. jQuery和js获取select元素的选中项value？

    1.jQuery方式获取:$("#test").val(); 2.js方式获取:document.getElementById("test").value;

  8. document.elementFromPoint在IE8下无法稳定获取当前坐标元素的解决方法

    document.elementFromPoint(e.clientX, e.clientY) document.elementFromPoint(e.clientX, e.clientY) 执行2次 ...

  9. jquery动态出操作select

    var citys = {1:'北京',2:'上海',3:'广州',4:'深圳'}; $("#city option:gt(0)").remove(); for(var k in ...

随机推荐

  1. 转载：移动前端开发之viewport的深入理解

    原文作者:无双 原文链接:http://www.cnblogs.com/2050/p/3877280.html 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有 ...

  2. BZOJ 1179 Atm 题解

    BZOJ 1179 Atm 题解 SPFA Algorithm Tarjan Algorithm Description Input 第一行包含两个整数N.M.N表示路口的个数,M表示道路条数.接下来 ...

  3. 【BZOJ】1104: [POI2007]洪水pow

    题意 给一个\(n * m(1 \le n, m \le 1000)\)的矩阵,如果\(a_{i, j}\)为正表示城市.\(|a_{i, j}|(|a_{i, j}| \le 1000)\)是格子\ ...

  4. 【BZOJ】3434: [Wc2014]时空穿梭

    http://www.lydsy.com/JudgeOnline/problem.php?id=3434 题意:n维坐标中要找c个点使得c个点在一条线上且每一维的坐标单调递增且不能超过每一维限定的值m ...

  5. 热烈庆祝华清远见2014嵌入式系统（Linux&Android）开发就业培训课程全面升级

    近日,华清远见公开宣布:2014嵌入式系统 (Linux&Android)开发就业培训课程再次升级!据悉,华清远见如今已经持续10年,一直保持课程每年2次的更新的频率.华清远见的每 次课程更新 ...

  6. Spring MVC Maven 环境搭建与部署

    本文简单演示了本地开发环境的搭建.项目出包.部署运行.HelloWorld,以及部分注意事项. 起初的玩法:先安装Eclipse,然后分别下载并安装Maven.spring的插件,再进行工程模式转换, ...

  7. 创建 maven 本地仓库

    在 pom.xml 添加依赖包的时候,有时候会提示无法从 http://repo1.maven.org/maven2/ 获取的情况,这时可配置个本地仓库: 从网上下载 maven 仓库网站源码包 Ne ...

  8. mvn生成runnablejar 的方法

    主要讲3点,生成runnable jar 方法1是生成一个目录 方法2是直接一个runnable的jar 方法3是关于包含spring工程的情况  方法2和3其实是一致的 1.生成runnable j ...

  9. hdu-acm steps 命运

    /*表示刚刚接触dp.这是我接触到的第3道dp题,刚开始以为是要用dfs+dp,后来栈溢出...仔细想想, 其实这道题和数塔差不多,只要每步都得到最优子结构,最后结果一定是最优的.题目的初始化要做好, ...

  10. Java XML解析工具 dom4j介绍及使用实例

    Java XML解析工具 dom4j介绍及使用实例 dom4j介绍 dom4j的项目地址:http://sourceforge.net/projects/dom4j/?source=directory ...