完美解决IE浏览器 option display:none 隐藏无效

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

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

3 ·

CC 4.0 BY-SA版权

文章标签：

#js #前端

前端技术专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种解决Internet Explorer浏览器中动态显示或隐藏Select下拉框Option问题的方法。通过使用JavaScript包裹并控制Option元素的显示与隐藏状态，确保了在不同选择下，Option能够正确响应。

最近遇到了select 下的option需要根据前一个select选项来显示或隐藏，发现在IE下该功能无法实现。
自己在网上看了一下前辈们的解决方法，然后根据自己的实际情况改了一下，放在这里给需要的朋友。

//初始化select
    function toggleOptionInit(obj,firstException){
        var firstException = arguments[1] ? arguments[1] : true;

        obj.find('option').each(function () {
            if(!$(this).parent().is('span')) {
                $(this).wrap("<span style='display:none'></span>");
            }
        });

        if(firstException){
            if(obj.find('option').eq(0).parent().is('span')){
                obj.find('option').eq(0).unwrap();
            }
        }
    }
    //隐藏显示option
    function toggleOption(obj,type) {
        if(type == 'show'){
            obj.each(function () {
                if($(this).parent().is('span')){
                    $(this).unwrap();
                }
            });
        }else{
            obj.each(function () {
                if(!$(this).parent().is('span')) {
                    $(this).wrap("<span style='display:none'></span>");
                }
            });
        }
    }