IE浏览器不支持display:none导致option不能隐藏的问题

最新推荐文章于 2023-06-21 15:57:58 发布
最新推荐文章于 2023-06-21 15:57:58 发布
阅读量1w 收藏 3
点赞数 1
CC 4.0 BY-SA版权
分类专栏： Java Web 文章标签： java web 浏览器 前端 IE浏览器option
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weigs81082580/article/details/70904044
本文介绍了解决IE浏览器不支持display:none属性的问题，通过两种方案实现级联select元素的功能，确保在不同浏览器环境下都能正常工作。

项目场景：级联的select元素，根据一级select的选择，二级select中的option选项需要对应的隐藏或显示。

原来的做法是display:none和display:block来隐藏和显示option，option中通过自定义属性data-category过滤，控制option的隐藏或显示，结果在IE浏览器中并不能达到想要的效果，通过网络查找，是因为IE浏览器不支持display:none属性。


解决方案：

1、给option外加一个父级标签，并设置父级标间隐藏[此处用的是span标签]，如果要显示的话则去除父级标签即可(网络上查找的方法)

2、在一级select的onchange事件触发的方法中按选择的option的值判断，通过$(selector).html("option的html代码")方法直接覆盖二级select的option内容


具体参考如下：

//html代码 



//方案一


//方案二

Angular 11中的表单控件优化：解决IE下Dropdown选项问题
m0_74337424的博客
03-16 37
通过移除无用的绑定，优化表单控件的初始化和重置逻辑，我们成功解决了在IE浏览器中下拉列表选项显示问题的兼容性问题。本文将探讨如何在Angular应用中优化表单控件的表现，特别是解决在Internet Explorer（IE）中出现的Dropdown选项显示问题。在一个Angular 11的项目中，我们有一个包含两个单选按钮和一个下拉列表的页面。然而，在IE浏览器中，即使代码在Chrome上表现良好，下拉列表中仍旧显示一个空选项。值得注意的是，在Edge中开启IE模式时，代码仍然能正常工作。
JS控制显示隐藏兼容问题(IE6、IE7、IE8)
01-21
在IE7中， 使用jQuery 显示：$(“#a”).attr(“style”,””); 隐藏：$(“#a”).attr(“style”,”display:none”); 但是显示这个方法在IE8中不行 IE8 显示：$(“#a”).removeAttr(“style”); 隐藏：$(“#a”).attr(“style”,”display:none”); IE6，最怪异，使用display:none不能隐藏select标签 下面这两个，经测试，在三个版本中都能正常使用 隐藏：document.getElementById(“a”).style.display=”none”; 显示：docume
完美解决IE浏览器 option display:none 隐藏无效
郭猛的博客
11-04 9221
最近遇到了select 下的option需要根据前一个select选项来显示或隐藏，发现在IE下该功能无法实现。 自己在网上看了一下前辈们的解决方法，然后根据自己的实际情况改了一下，放在这里给需要的朋友。//初始化select function toggleOptionInit(obj,firstException){ var firstException = argume
解决Select标签的Option在IE浏览中display:none不生效的问题
dizong1532的博客
05-08 1341
页面的Select标签，需要控制Select的Option不需要显示，根据条件来隐藏某些Option选项。 正常情况下使用hide()就能实现，hide()方法实际是给Option加上display属性(display:none)，这样就可以隐藏掉Option； 但是IE浏览器下Option(display:none)是不生效的，解决方案是：直接对Option包一层，加Span标签。...
解决IE下select option不支持display none样式
weixin_30467087的博客
08-20 252
万恶的IE，option竟然不支持display样式，想到的解决思路有二个： 　　1、ajax联动查询 　　2、jQuery的remove()、after()方法 方法1的不好之处是初始页面，需要显示全部IP，本来已经从后台查询了一次，如果再利用ajax，会给服务器造成压力，所以采用方法2。 后台code // 获取所有平台类型IP$vcenter_ip = $this-&gt...
display:none 属性在IE5.6.7.8.9下失效的解决方案
PENGFUMING的专栏
09-01 1736
.DB_tab25 .DB_bgSet li{position:absolute;width:100%;height:420px;display:none;}
【报错】IE下使用js隐藏元素display='none'不生效
随波一落叶
12-13 3620
一、问题描述 今天在写页面时，在js中用到了下面这句来隐藏页面上的元素： document.getElementById("xxx").style.display = 'none'; 但是使用IE打开页面的时候，发现这部分元素并没有成功被隐藏。 二、问题解决 于是首先考虑的是可能IE不支持这个语法，但是查找了资料后确认IE是支持这个语法的。 纠结了一会儿，发现IE下方弹了...
IE不支持option的display样式，只能使用remove和add
12-09
本以为通过display:none即可实现，结果发现在option元素上使用display:none在firefox中有效，在IE6、IE7、IE8中都无效。    所以，通过javascript设置display:none也是在IE中无效，代码如下： it works……...
还是用IE浏览器抓取吧，优化的话可以考虑把网站中的内容下载下来
最新发布
08-12
我们之前尝试用XMLHTTP替代IE浏览器，但用户现在希望还是使用IE浏览器，并且考虑将网页内容下载下来进行解析。因此，我们需要恢复使用IE浏览器，但可以优化其性能，比如通过将网页内容下载到本地再解析，避免频繁与...
基于Jquery模拟Select,解决IE显示问题
05-14
同时，这种模拟方法也能帮助我们在IE浏览器中获得更一致的视觉效果和交互体验。 需要注意的是，虽然这种方法可以解决IE的显示问题，但在现代浏览器中，原生的Select元素通常有更好的性能和可用性。因此，为了兼顾...
ie display none(ie下display属性失效)
weixin_34356138的博客
07-10 1559
2019独角兽企业重金招聘Python工程师标准>>> ...
option在IE上隐藏不了问题解决方案
楠的博客
08-15 1188
$("#selectEventopt option[value='locked']").wrap("<span style='display:none'></span>"); $("#selectEventopt option[value='label_index']").wrap("<span style='display:none...
【解决】SELECT标签中OPTION的显隐控制(兼容IE)
08-20 1130
问题描述： 在有些功能切换的时候，select标签中的某些option是要被隐藏的。但通过设置option的样式为 display:none根本无法隐藏option标签。 解决方案： 1、首先设置option的display:none的方案肯定是不可行了； 2、某网友提出的两种方案： 1.在option标签上面加上disabled="disabled"属性，表示不可用，这种方案只是让opt...
让IE的option支持双击/单击事件
weixin_34128839的博客
08-03 198
众所周知,在IE里, select的option是不支持onclick事件的, 而在FF 和 OPERA 里, option 是支持onclick事件的. (safari似乎也不支持,不过暂时我还不知道如何解决safari的问题.) 虽然onchange在某些时刻可以代替 option的click事件, 但是两者并无法做到完全等价. 因为onchange只有在 你点击的option和之前的opti...
IE的option标签单击事件无法触发的解决方法
u011482763的博客
11-05 1648
说明： 1、下面使用的代码仅适用于于IE浏览器，测试环境为IE8. 2、下面的代码来自于网络，我做了下闭包的整合 情景说明： 对于这样的一个select标签： [html] view plain copy   select id="s">     option onkeydown="onkeyDown(this)" onkeypress="o
option元素 display属性在IE下无效的解决方法
凡夫俗子
11-23 3603
在做项目中 有个 区域和街道的联动效果，选择地区后过滤对应的街道。我刚开始时使用的方法是将option设置成 display:none,结果在IE下无效。 解决方法:  一.   用一个变量保存所有街道的值，过滤的时候取出来，动态添加到select中 二、用jquery的 $.wrap方法在option外面添加一个父元素 通过父元素控制option的隐藏 三
option中css失效,option.style.display =“ none”在野生动物园中不起作用
weixin_42566072的博客
08-04 757
HTML：helloI'M THE CHOSEN ONEasdwerqweJS：var sel = document.getElementById("asd");var optnz = sel.getElementsByTagName("option")[1];sel.value = optnz.value;optnz.style.display = "none";如您所见，它在chrome中有效...
el-select options选项的显示和隐藏
m0_50666077的博客
06-21 5888
标签，通过CSS控制显示与隐藏就可以了。
IE6,7 表格display:none导致表格错乱的问题
wwwcomy的程序猿感悟
10-13 1353
前端显示遇到个IE6,7显示异常的问题，具体表现： 表格有若干列，4行 第一行为隐藏行 tr display:none 第二行为表头 rowspan为3,3,2,3,2,1 第三行为合并表头 只有两列，rowspan为1 第四行为隐藏行 共有6列数据 tr display:none 结果发现IE中表格异常，rowSpan为3的单元格竟然高度和1的一样，rowspan=2的反而显示正常 如
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值