欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

怎么解决option设置display:none不兼容ie的问题?

程序员文章站 2022-06-10 15:41:39
注意: 1.option设置display:none不兼容ie的问题 2.option的外包含标签和内包含标签都不读取自动拦截,也不报错。 解决display:none的兼容...

注意:

1.option设置display:none不兼容ie的问题

2.option的外包含标签和内包含标签都不读取自动拦截,也不报错。

解决display:none的兼容问题

    <!doctype html>
<head>
    <meta charset="utf-8">
</head>
<body>


<select>
    <option value="papername" selected="selected">选项一</option>
    <option value="state">选项二</option>
    <option value="state">选项三</option>
    <option value="state">选项四</option>
    <option value="state">选项五</option>
    <option value="state">选项六</option>
</select>

<button onclick="toggleoptionshow($('select'),'',[0,1,3])">隐藏一,二,四</button>
<button onclick="toggleoptionshow($('select'),[0,1,3],'')">显示一,二,四</button>
<script src="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
/*参数说明:
需被控制的select对象,
需显示的option序号(留空则不处理) eg:[0,1,3],
需隐藏的option序号(留空则不处理) eg:[2,4,6]
*/
function toggleoptionshow(obj,arrshow,arrhide){
    function arrhandle(arr,type){
        if($.isarray(arr)){
            var len=arr.length;
            for(i=0;i<len;i++){
                var optionnow=obj.find("option").eq(arr[i]);
                var optionp=optionnow.parent("span");
                if(type=="show"){                   
                    if(optionp.size()){
                        optionp.children().clone().replaceall(optionp); 
                    }               
                }else{
                    if(!optionp.size()){
                        optionnow.wrap("<span style='display:none'></span>");
                    }
                }
            }
        }
    }
    arrhandle(arrshow,"show");
    arrhandle(arrhide,"hide");
}


</script>
</body>
</html>