解决option设置display：none不兼容ie的问题

最新推荐文章于 2021-08-04 00:20:00 发布

原创最新推荐文章于 2021-08-04 00:20:00 发布 · 3.9k 阅读

2 ·

CC 4.0 BY-SA版权

css 同时被 2 个专栏收录

6 篇文章

订阅专栏

360浏览器兼容

2 篇文章

订阅专栏

本文介绍了一种解决IE浏览器中option元素display:none属性兼容性问题的方法，并提供了一个JavaScript函数来实现option项的动态显示与隐藏。通过包裹span元素的方式绕过IE限制，实现了跨浏览器的稳定效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注意：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="http://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>