解决Select标签的Option在IE浏览中display:none不生效的问题

2022-11-09 14:16:04

页面的Select标签，需要控制Select的Option不需要显示，根据条件来隐藏某些Option选项。

正常情况下使用hide()就能实现，hide()方法实际是给Option加上display属性(display:none)，这样就可以隐藏掉Option；

但是IE浏览器下Option(display:none)是不生效的，解决方案是：直接对Option包一层，加Span标签。

例子：

如下图显示：通过第一个Select选择Option来控制是否显示第二个Select的Option选项。

        <select id="sel-platform" onchange="selPlatform(this);" name="sel-platform" style="width: 202px; height: 26px;" class="valid">

                <option data-group="Aliyun" selected="selected">Aliyun</option>

                <option data-group="CentOS">CentOS</option>

                <option data-group="CoreOS">CoreOS</option>

                <option data-group="Debian">Debian</option>

                <option data-group="Freebsd">Freebsd</option>

                <option data-group="openSUSE">openSUSE</option>

                <option data-group="SUSE">SUSE</option>

                <option data-group="Ubuntu">Ubuntu</option>

                <option data-group="Windows Server 2008">Windows Server 2008</option>

                <option data-group="Windows Server 2012">Windows Server 2012</option>

                <option data-group="Windows Server 2016">Windows Server 2016</option>

        </select>

        <select id="sel-osname" name="sel-osname" style="width: 380px; height: 26px;" class="valid">

                <option data-group="Aliyun" data-value="alinux_17_01_64_20G_cloudinit_20171222.vhd" selected="selected">Aliyun Linux  17.1 64位</option>

                <option data-group="CentOS" data-value="centos_6_08_32_40G_alibase_20170710.vhd">CentOS  6.8 32位</option>

                <option data-group="CentOS" data-value="centos_6_08_64_20G_alibase_20170824.vhd">CentOS  6.8 64位</option>

                <option data-group="CentOS" data-value="centos_6_09_64_20G_alibase_20170825.vhd">CentOS  6.9 64位</option>

                <option data-group="CentOS" data-value="centos_7_02_64_20G_alibase_20170818.vhd">CentOS  7.2 64位</option>

                <option data-group="CentOS" data-value="centos_7_03_64_20G_alibase_20170818.vhd">CentOS  7.3 64位</option>

                <option data-group="CoreOS" data-value="coreos_1465_8_0_64_30G_alibase_20171024.vhd">CoreOS  1465.8.0 64位</option>

                <option data-group="Debian" data-value="debian_8_09_64_20G_alibase_20170824.vhd">Debian  8.9 64位</option>

                <option data-group="Debian" data-value="debian_9_02_64_20G_alibase_20171023.vhd">Debian  9.2 64位</option>

                <option data-group="Freebsd" data-value="freebsd_11_03_64_20G_alibase_20170901.vhd">FreeBSD  11.1 64位</option>

                <option data-group="openSUSE" data-value="opensuse_42_03_64_20G_alibase_20171031.vhd">OpenSUSE  42.3 64位</option>

                <option data-group="SUSE" data-value="sles_11_sp4_64_20G_alibase_20170907.vhd">SUSE Linux  Enterprise Server 11 SP4 64位</option>

                <option data-group="Ubuntu" data-value="ubuntu_14_0405_32_40G_alibase_20170711.vhd">Ubuntu  14.04 32位</option>

                <option data-group="Ubuntu" data-value="ubuntu_14_0405_64_20G_alibase_20170824.vhd">Ubuntu  14.04 64位</option>

                <option data-group="Ubuntu" data-value="ubuntu_16_0402_32_40G_alibase_20170711.vhd">Ubuntu  16.04 32位</option>

                <option data-group="Ubuntu" data-value="ubuntu_16_0402_64_20G_alibase_20171227.vhd">Ubuntu  16.04 64位</option>

                <option data-group="Windows Server 2008" data-value="win2008_32_std_sp2_zh-cn_40G_alibase_20170622.vhd">Windows Server  2008 标准版 SP2 32位中文版</option>

                <option data-group="Windows Server 2008" data-value="win2008r2_64_ent_sp1_en-us_40G_alibase_20170915.vhd">Windows Server  2008 R2 企业版 64位英文版</option>

                <option data-group="Windows Server 2008" data-value="win2008r2_64_ent_sp1_zh-cn_40G_alibase_20170915.vhd">Windows Server  2008 R2 企业版 64位中文版</option>

                <option data-group="Windows Server 2012" data-value="win2012r2_64_dtc_17196_en-us_40G_alibase_20170915.vhd">Windows Server  2012 R2 数据中心版 64位英文版</option>

                <option data-group="Windows Server 2012" data-value="win2012r2_64_dtc_17196_zh-cn_40G_alibase_20170915.vhd">Windows Server  2012  R2 数据中心版 64位中文版</option>

                <option data-group="Windows Server 2016" data-value="win2016_64_dtc_1607_en-us_40G_alibase_20170915.vhd">Windows Server  2016 数据中心版 64位英文版</option>

                <option data-group="Windows Server 2016" data-value="win2016_64_dtc_1607_zh-cn_40G_alibase_20170915.vhd">Windows Server  2016 数据中心版 64位中文版</option>

                <option data-group="Windows Server 2016" data-value="winsvr_64_dtcC_1709_en-us_40G_alibase_20171115.vhd">Windows Server  Version 1709 数据中心版 64位英文版（不含UI）</option>

                <option data-group="Windows Server 2016" data-value="winsvr_64_dtcC_1709_zh-cn_40G_alibase_20171115.vhd">Windows Server  Version 1709 数据中心版 64位中文版（不含UI）</option>

        </select>

实现方法的脚本如下：

 <script>

        $(function(){

            //默认选取第一个

            $("#sel-platform option:first").attr("selected",true);

            selPlatform($("#sel-platform"))

        });

        function selPlatform(obj){

            var gName=$(obj).find("option:selected").attr("data-group");

            $("#sel-osname>option").each(function(){

                $(this).wrap("<span style='display:none'></span>");

            });

            $("#sel-osname option[data-group='" + gName + "']").show();

            $("#sel-osname option[data-group='" + gName + "']").each(function(){

                $(this).clone().replaceAll($(this).parent());

            });

        }

    </script>

码农公寓

相关文章