页面的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>

解决Select标签的Option在IE浏览中display:none不生效的问题的更多相关文章

  1. 解决如何通过循环来使用数据库的值设置jsp的select标签的option值

    Select 处的代码: <select name="position"> <span style="white-space:pre"> ...

  2. select标签下option标签里value属性有什么用以及和text的区别

    转自:http://blog.csdn.net/summer_sy/article/details/54572398 1:value的用处 <select > <option val ...

  3. html的select标签清空option!~~~~

    最好的方法:document.getElementById("selectId").length = 1; 也可以document.getElementById("sel ...

  4. CSS - Select 标签在不同浏览器中的高度设置

    当使用Select标签时,在不同浏览器中显示的高度不同,如何解决此问题: 解决方法链接:http://stackoverflow.com/questions/20477823/select-html- ...

  5. select标签multiple属性的用法

    前些日子公司让做一个功能模块.对于里面一个小功能费了些周折,现将其总结一下: 一.实现效果: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZ2FvaHVh ...

  6. 解决在IE6、7中用height来设定SELECT标签高度无效的兼容性问题

    在IE6.7中用height来设定SELECT标签高度是无效的,宽度的话各浏览器设置都是一致的,解决方法就是在select外嵌套两层标签,一层用来遮挡select的默认边框(在IE6.7中设置bord ...

  7. select标签非空验证,第一个option value=""即可

    select标签非空验证,第一个option value=""即可,否则不能验证

  8. JS实现选择不同select标签option值的验证

    js实现不同select标签option值的验证 功能描述: 选择中文时,匹配中文的正则表达式,选择英文选项是匹配英文的表达式,并且有对应的提示信息. html代码片段: <select id= ...

  9. css解决select下拉表单option高度的办法

    css在给select下拉表单设置样式如边框时可以轻松搞定,而我们在不喜欢其默认的下拉箭头的样式时试图通过background:url(图片路径)来修改之,则往往会出现浏览器的兼容性问题,在网上查了好 ...

随机推荐

  1. 版本控制—使用Gradle自动管理应用程序版本

    我们在开发App时,通常在项目的Release阶段我们需要设置应用的版本号和版本名称,也就是设置下面两个属性 versionCode versionName 版本号 其中versionCode的值是i ...

  2. Java案例:双色球的实现

    //随机生成双色球号码 //案例:6颗红球(33选1)  1颗蓝球(16选1) 代码实现如下: import java.util.Random; import java.util.Arrays; // ...

  3. MySQL最佳实践

    一.核心军规         - 不在数据库做运算:cpu计算务必移至业务层         - 控制单表数据量:单表记录控制在1000w         - 控制列数量:字段数控制在20以内     ...

  4. iOS中 UITextView文本视图 技术分享

    UITextView: 文本视图相比与UITextField直观的区别就是UITextView可以输入多行文字并且可以滚动显示浏览全文. UITextField的用处多,UITextView的用法也不 ...

  5. Volley请求

    1. Volley简介 我们平时在开发Android应用的时候不可避免地都需要用到网络技术,而多数情况下应用程序都会使用HTTP协议来发送和接收网络数据.Android系统中主要提供了两种方式来进行H ...

  6. centos6.5 rsync+inotify实现服务器之间文件实时同步

    1. rsync的优点与不足 与传统的cp.tar备份方式相比,rsync具有安全性高.备份迅速.支持增量备份等优点,通过rsync可以解决对实时性要求不高的数据备份需求,例如定期的备份文件服务器数据 ...

  7. 《java入门第一季》之面向对象(如何使用帮助文档)

    1:打开帮助文档 2:点击显示,找到索引,看到输入框 3:知道你要找谁?以Scanner举例 4:在输入框里面输入Scanner,然后回车 5:看包 java.lang包下的类不需要导入包,其他的全部 ...

  8. PDA(Windows Mobile)调用远程WebService

    之前用模拟器测试过调用远程的WebService,发现总是提示"无法连接到远程服务器"的错误,不管是Windows Mobile6.0 还是6.5都是一样,按照网上的办法,改注册表 ...

  9. 网站开发进阶(一)Tomcat域名或IP地址访问方式配置方法

    Tomcat域名或IP地址访问方式配置方法 1.配置www.***.com域名方式访问 在Tomcat下面配置域名(如:www.***.com)的时候,同时又不希望客户通过我们网站的IP或者域名访问到 ...

  10. RHEL6非交互式工具sshpass和expect安装

    RHEL6非交互式工具sshpass和expect安装 1 sshpass 在rhel6.4上,没有sshpass的软件包,无法采用yum方式安装.从源码编译安装非常简单. 1) 下载sshpass源 ...