display：none不适用于选项
[英]display:none doesn't work for option
问题描述
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 size attribute ? 如何在select中隐藏具有size属性的选项？
5 个解决方案
解决方案1
4 已采纳 2013-10-09 11:22:50
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（第30版）中，“display：none”不起作用，但是在Firefox（第24节）中，“display：none”选项不会出现在列表中。
UPDATE2: UPDATE2：
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（第70版）和Firefox（第63版）版本中，在选项标签中使用带有“display：none”的css以及属性“disabled”会从列表中删除该选项，但它不会出现更多。
<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的帮助
解决方案2
1 2013-10-09 11:14:53
在这篇文章中有一种隐藏选项的技术： 如何用CSS隐藏<select>菜单中的<option>？
解决方案3
0 2013-10-09 11:54:23
Use following jQuery to hide and show under select 使用以下jQuery隐藏和显示在选择下
jQuery(selector).toggleOption(true); // show option
jQuery(selector).toggleOption(false); // hide option
解决方案4
0 2013-10-09 11:59:08
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.. 如果你想隐藏去这里..
解决方案5
0 2013-10-09 11:59:24
The property Display:none wont work on the options tag so you have only two options as work around 属性Display:none不会对选项标签起作用，因此您只有两个选项可以解决
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 您也可以找到其他一些工作，但我不认为它会在所有浏览器中保持一致
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.