IE8下JQuery clone 出的select元素使用append添加option异常解决记录

  遇到一个怪现象,由于配置参数是多实例的, 故采用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样式弄乱,还请大侠赐教。

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值