页面的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. xml解析之使用dom4j的api对xml文件进行CRUD(二)

    在使用dom4j的api对xml文件进行CRUD(一)见博客http://blog.csdn.net/qq_32059827/article/details/51524330的基础上,再对做一次练习. ...

  2. 小老虎的微信公众号:iITObserve

    小老虎的微信公众号:iITObserve 现在,都流行玩微信. 现在,都流行玩微信公众号. 所以,博客已经Out啦! 原来是微博,现在是微信.真的,时代发展太快了. 偶赶紧也弄了一个,尝尝鲜. 偶的微 ...

  3. (NO.00003)iOS游戏简单的机器人投射游戏成形记(十四)

    我们首先必须将Level中所有机器人保存在某个数组里,因为该数组会在不同地方被访问,我们将其放在LevelRestrict类中,按道理应该放到GameState类中,这里从简. 打开LevelRest ...

  4. HTML5 移动开发入门知识点

    转自:http://www.cnblogs.com/blog-zwei1989/archive/2012/12/12/2815049.html 1.先来看淘宝无线wiki要求在页面中添加的meta标签 ...

  5. iOS树状视图(折叠单元格)详细使用

    RATreeView是一个第三方的iOS树视图(通俗的讲就是折叠单元格),它是对UITableView的封装,定义自己的委托和数据源的法,RATreeView是高度可定制的,并且有很多功能.很多朋友都 ...

  6. 【翻译】Ext JS 5的委托事件和手势

    原文:Delegated Events and Gestures in Ext JS 5 简介 Ext JS在5之前的版本,被设计为专用于传统鼠标输入的桌面设备使用.而从5开始,添加了对触屏输入的支持 ...

  7. Java 反射之JDK动态代理

    Proxy提供用于创建动态代理类和代理对象的静态方法,它也是所有动态代理类的父类.如果我们在程序中为一个或多个接口动态地生成实现类,就可以使用Proxy来创建动态代理类:如果需要为一个或多个接口动态的 ...

  8. 基于GraphCuts图割算法的图像分割----OpenCV代码与实现

    转载请注明出处:http://blog.csdn.net/wangyaninglm/article/details/44151213, 来自:shiter编写程序的艺术 1.绪论 图切割算法是组合图论 ...

  9. Memcached学习笔记 — 第四部分:Memcached Java 客户端-gwhalin(1)-介绍及使用

     介绍 Memcached java client是官方推荐的最早的memcached java客户端.最新版本:java_memcached-release_2.6.1. 官方下载地址:http ...

  10. 重新初始化VS2010

    开始->所有程序->Microsoft Visual Studio 2010->Visual Studio Tools->Visual Stdio命令提示(2010)  这时会 ...