Question

演示here

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：

select{width:50px;}

[value=C]{
    display: none;
}
/* will hold the position */ 
[value=B]{
    visibility: hidden;
}

size属性会影响显示和可见性，会发生什么？

如何隐藏select中具有size属性的选项？

Answer 1

请参阅更新的部分

我认为你不能只为所有浏览器使用CSS，你需要一些JS代码，之前的问题非常相似：

How to hide a <option> in a <select> menu with CSS?

在Chrome中（第30页）“display：none”不起作用，但在Firefox（第24节）中可行，带有“display：none”的选项不会出现在列表中。

<强> UPDATE2：

在当前的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>

感谢@achecopar的帮助

Answer 2

在此帖子中有一种隐藏选项的方法：How to hide a <option> in a <select> menu with CSS?

Answer 3

使用以下jQuery隐藏并显示在选择

下

jQuery(selector).toggleOption(true); // show option
jQuery(selector).toggleOption(false); // hide option

Answer 4

你需要这个......

<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>

禁用值无法选择。

如果你想隐藏去这里..

http://jsbin.com/anoci

Answer 5

属性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.

您也可以找到其他一些工作，但我不认为它会在所有浏览器中保持一致

display：none不适用于选项

5 个答案: