Html display:none 不适用于选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19270386/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
display:none doesn't work for option
提问by wener
Demo here
演示在这里
HTML:
HTML：
display:none <b>not works</b>,the hidden can <b>not select</b>.<br>
<select size="5">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
<option value="H">H</option>
<option value="I">I</option>
</select><br>
display:none <b>works</b>,the hidden <b>can select</b>.<br>
<select>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
<option value="H">H</option>
<option value="I">I</option>
</select>
CSS:
CSS：
select{width:50px;}
[value=C]{
display: none;
}
/* will hold the position */
[value=B]{
visibility: hidden;
}
The size attribute will affect the display and visibility, what happen to this ?
size 属性会影响显示和可见性，这是怎么回事？
How can I hide the option in select which has a sizeattribute ?
如何隐藏 select 中具有size属性的选项？
采纳答案by Roberto
See updated section
见更新部分
I think you can not do that only with CSS for all browsers you'll need some JS code, there is a previous question quite similar:
我认为你不能只对所有浏览器使用 CSS，你需要一些 JS 代码，之前有一个非常相似的问题：
How to hide a <option> in a <select> menu with CSS?
如何使用 CSS 在 <select> 菜单中隐藏 <option>？
In Chrome (v. 30) "display:none" doesn't work, however in Firefox (v. 24) It works, the option with "display:none" doesn't appear in the list.
在 Chrome (v. 30) 中，“display:none”不起作用，但是在 Firefox (v. 24) 中，它可以工作，带有“display:none”的选项不会出现在列表中。
UPDATE2:
更新2：
In the current Chrome (v. 70) an Firefox (v. 63) versions, the use of css with "display:none" along with attribute "disabled" in the option tag removes the option from the list and it doesn't appear any more.
在当前的 Chrome (v. 70) 和 Firefox (v. 63) 版本中，在选项标签中使用带有“display:none”和属性“disabled”的 css 会从列表中删除该选项，并且它不会出现没有了。
<html><body>
<select>
<option disabled style="display:none">Hola</option>
<option>Hello</option>
<option>Ciao</option>
</select>
</body></html>
Thanks to @achecopar for the help
感谢@achecopar 的帮助
回答by acairns
There is a technique for hiding options within a select in this post: How to hide a <option> in a <select> menu with CSS?
在这篇文章中有一种隐藏选项的技术：如何使用 CSS 在 <select> 菜单中隐藏 <option>？
回答by Rigel Networks
Use following jQuery to hide and show under select
使用下面的 jQuery 在选择下隐藏和显示
jQuery(selector).toggleOption(true); // show option
jQuery(selector).toggleOption(false); // hide option
回答by Arun
is you need this...
你需要这个吗...
<select>
<option value="A">A</option>
<option disabled value="B">B</option>
<option value="C">C</option>
<option disabled value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
<option value="H">H</option>
<option value="I">I</option>
</select>
the disable value are not select-able.
禁用值不可选择。
if you want to hide go here..
如果你想隐藏就去这里..
回答by Vinay Pratap Singh
The property Display:nonewont work on the options tag
so you have only two options as work around
该属性Display:none不适用于 options 标签，因此您只有两个选项可以解决
1. Either disable then with disabled="disabled".
2. Remove the options you don't want to see and insert them again when needed.
you may be able to find some other work around too, but i don't think it will be consistent in all the browsers
您也可以找到其他一些解决方法，但我认为它不会在所有浏览器中保持一致
