首页 / JAVASCRIPT / IE不支持option的display样式，只能使用remove和add

IE不支持option的display样式，只能使用remove和add

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了IE不支持option的display样式，只能使用remove和add，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2210字，纯文字阅读大概需要4分钟。

内容图文

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
想实现一个很简单的功能：当选中“中介”时，不显示“求购”与“求租”。本以为通过display:none即可实现，结果发现在option元素上使用display:none在firefox中有效，在IE6、IE7、IE8中都无效。

IE不支持option的display样式，只能使用remove和add - 文章图片

IE不支持option的display样式，只能使用remove和add - 文章图片
所以，通过javascript设置display:none也是在IE中无效，代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="yue-Hans" lang="yue-Hans"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>it works..............</title> </head> <body> <form action="./" method="get"> <dl> <dt>发布者</dt> <dd> <select name="q_role" onchange="role_change_type();"> <option value="company">中介</option> <option value="person">个人</option> </select> <select name="q_type"> <option value="sale">出售</option> <option value="lease">出租</option> <option value="buy">求购</option> <option value="hire">求租</option> </select> </dd> </dl> <script type="text/javascript"> function role_change_type() { var q_role=document.getElementsByName("q_role"); var q_type=document.getElementsByName("q_type"); var q_type_option=q_type[0].getElementsByTagName("option"); if(q_role[0].value=='company') { if(q_type[0].value=='buy'||q_type[0].value=='hire') { q_type[0].value='sale'; } for(var i=0;i!=q_type_option.length;i++) { if(q_type_option[i].value=="buy"||q_type_option[i].value=="hire") { q_type_option[i].style.display="none"; } } } if(q_role[0].value=='person') { for(var i=0;i!=q_type_option.length;i++) { q_type_option[i].style.display=""; } } } role_change_type(); </script> </form> </body> </html>
[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
所以，只能通过select元素的remove和add方法，当选中“中介” 时，把“求租”和“求购”删除。代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="yue-Hans" lang="yue-Hans"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>it works..............</title> </head> <body> <form action="./" method="get"> <dl> <dt>发布者</dt> <dd> <select name="q_role" onchange="role_change_type();"> <option value="company">中介</option> <option value="person">个人</option> </select> <select name="q_type"> <option value="sale">出售</option> <option value="lease">出租</option> <option value="buy">求购</option> <option value="hire">求租</option> </select> </dd> </dl> <script type="text/javascript"> var q_role=document.getElementsByName("q_role"); var q_type=document.getElementsByName("q_type"); var q_type_option=q_type[0].getElementsByTagName("option"); alert(q_role[0].value) if(q_role[0].value=='company') { q_type[0].remove(3) q_type[0].remove(2) } function role_change_type() { if(q_role[0].value=='company') { q_type[0].remove(3) q_type[0].remove(2) } if(q_role[0].value=='person') { var x=document.createElement('option'); x.text='求购'; x.value='buy'; var y=document.createElement('option'); y.text='求租'; y.value='hire'; try { q_type[0].add(x,null); q_type[0].add(y,null); // standards compliant } catch(ex) { q_type[0].add(x); q_type[0].add(y); // IE only } } } </script> </form> </body> </html>
[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
这样在IE和firefox中都有效了。真费解啊，IE8竟然还不支持option的display:none 。
上面的代码还有一个问题：在IE7和IE8中选中“个人”，然后刷新，将导致“求租”和“求购”被删除。在IE6和firefox3.5.5中正常。

内容总结

以上是互联网集市为您收集整理的IE不支持option的display样式，只能使用remove和add全部内容，希望文章能够帮你解决IE不支持option的display样式，只能使用remove和add所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/372258.html

来源：【匿名】

【上一篇】JavaScript中出现乱码的处理心得【下一篇】javascript 怎么调用php方法

更多 ►

【IE不支持option的display样式，只能使用remove和add】教程文章相关的互联网学习教程文章

JavaScript中style.display属性怎么使用【图】

style.display属性是Style对象的display属性，Style对象用于自由更改元素的样式。例如，您可以添加各种样式，比如元素的高度和宽度，颜色和背景等。我们来看看display属性display属性具有指定元素的显示样式的作用。不显示元素，或者作为块元素显示，或者可以指定各种显示方法style.display属性的基本用法我们来看代码如下<!DOCTYPE html> <html> <head><title></title><meta charset="utf-8"> </head> <body> <img id="style1" sr...

JS修改元素display属性实例代码

当我们想要使用JS来控制元素 display 属性来使其显示或者隐藏时，需要将 display 属性作用在行间样式上，本文主要和大家分享JS修改元素display属性实例代码，希望能帮助到大家。并使用 ID 选择器即 <p id="drop-box" style="display:none"> 在JS文件中，var dropBox = document.getElementById("drop-box");//设置元素显示function showBox(){ dropBox.style.display = "block";}//设置元素隐藏function hideBox(){ ...

JavaScript中css的display：none与remove在使用时的区别？

写一个鼠标悬停显示，离开消失的js鼠标悬停时在js中得到数据，使用.append（pop）粘贴到dom，显示在.Micro_video_imgne标签内。鼠标移走时使用remove让pop消失。但使用remove时有一个问题，当鼠标在pop上边悬停时，pop标签就会闪啊闪，因为增加的样式（.pop）在鼠标悬停标签（.Micro_video_img）内。如果使用css（display：none）可以完美实现效果。但出个问题是会增加页面的标签。$("body").on("mouseover",".Micro_video_img",fu...

JQuery—display和Show()方法

??显示隐藏的匹配元素。这个就是 show( speed, [callback] ) 无动画的版本。如果选择的元素是可见的，这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;，这个方法都将有效。HTML 代码:<p style="display: none">Hello</p>jQuery 代码:$("p").show("fast",function(){$(this).text("Animation Done!");});定义和用法display 属性规定元素应该生成的框的类型。值描述none此元素不会被...

IE不支持option的display样式，只能使用remove和add_表单特效【图】

it works.............. [Ctrl+A 全选注:如需引入外部Js需刷新才能执行] 想实现一个很简单的功能：当选中“中介”时，不显示“求购”与“求租”。本以为通过display:none即可实现，结果发现在option元素上使用display:none在firefox中有效，在IE6、IE7、IE8中都无效。所以，通过javascript设置display:none也是在IE中无效，代码如下： it works.............. [Ctrl+A 全选注:如需引入外部Js需刷新才能执行] 所以，只能通过sel...

JAVASCRIPTstyle中visibility和display之间的区别_javascript技巧【图】

当visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。 --------------------------------------------------------------- 例子：代码如下: 输出流。 -------------------------------------------------------------- 例子：代码如下: function toggleDisplay(me){ if (me.style.display=="block"){ me.style.display="inline"; alert("文本现在是：'inline'."); } else { if (me.style.d...

JS中style.display和style.visibility的区别实例说明_javascript技巧

在JS中可以通过设置style.display或者style.visibility属性来控制元素是否显示，在style.display=block和style.visibility=visible的时候，元素被显示，在style.display=none和style.visibility=hidden的时候，元素被隐藏。它们之间最大的区别是通过style.display=none隐藏的时候，元素不占据原来的位置，从文档流中脱离，后续的元素填补其位置。通过style.visibility=hidden隐藏的时候，元素仍然占据原来的位置，只是被隐藏。下面...

JavaScript中的style.display属性操作_javascript技巧【图】

js将控件隐藏的方法及display属性介绍_javascript技巧

用JavaScript隐藏控件的方法有两种，分别是通过设置控件的style的“display”和“visibility”属性。当style.display="block"或style.visibility="visible"时控件或见，当style.display="none"或style.visibility="hidden"时控件不可见。不同的是“display”不但隐藏控件，而且被隐藏的控件不再占用显示时占用的位置，而“visibility”隐藏的控件仅仅是将控件设置成不可见了，控件仍然占俱原来的位置。代码如下:function display...

js将控件隐藏及display属性的使用介绍_javascript技巧

display和visibility的区别示例介绍_javascript技巧【图】

display通常可以设置为none、inline、block visibility通常可以设置为hidden、visible 当display为none，visibility为hidden时，元素都会不见。不过其还有不同之处。 display会将元素隐藏掉，并且位置不再被占据，而visibility则是占据原来的位置。看例子即可明白：代码如下: function isVisibility(me){ if (me.style.visibility=="hidden"){ me.style.visibility="visible"; } else{ me.style.visibility="hidden"; } ...

jquery控制display属性为none或block_jquery

代码如下: //隐藏 $("#id").css(display,none); //显示 $("#id").css(display,block); 或 $("#id")[0].style.display = none; $("#id")返回的是JQuery 它是个集合肯定有display属性 $("#id").show()表示display:block, $("#id").hide()表示display:none; $("#id").toggle()切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

javascript获取隐藏元素(display:none)的高度和宽度的方法_javascript技巧【图】

js获取可见元素的尺寸还是比较方便的，这个可以直接使用这个方法：代码如下:function getDefaultStyle(obj,attribute){ // 返回最终样式函数，兼容IE和DOM，设置参数：元素对象、样式特性 return obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute];}但是如果这个元素是隐藏(display:none)的，尺寸又是未知自适应的，哪有上面的方法就不行了！因为display:none的元素是没...

js中style.display=""无效的解决方法_javascript技巧

本文实例讲述了js中style.display=""无效的解决方法。分享给大家供大家参考。具体解决方法如下：一、问题描述：在js中我们有时想动态的控制一个div显示或隐藏或更多的操作，但如果我们style.display=""可能导致没有效果。看下面一段代码：代码如下:#name{display:none;}My name is smile.

jquery设置style:display的方法_jquery

("#id").css('display','none'); $("#id").css('display','block'); 或 $("#id")[0].style.display = none; $("#id")返回的是JQuery 它是个集合肯定有display属性 $("#id").show()表示display:block, $("#id").hide()表示display:none; $("#id").toggle()切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的

首页 / JAVASCRIPT / IE不支持option的display样式，只能使用remove和add

IE不支持option的display样式，只能使用remove和add

内容导读

内容图文

内容总结

内容备注

内容手机端

【IE不支持option的display样式，只能使用remove和add】教程文章相关的互联网学习教程文章

IE - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程