9

Demo 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;
}

The size attribute will affect the display and visibility, what happen to this ?

How can I hide the option in select which has a size attribute ?

4

5 回答 5

8

见更新部分

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

如何使用 CSS 在 <select> 菜单中隐藏 <option>？

在 Chrome (v. 30) 中，“display:none”不起作用，但是在 Firefox (v. 24) 中它起作用，带有“display:none”的选项不会出现在列表中。

更新2：

在当前的 Chrome (v. 70) 和 Firefox (v. 63) 版本中，使用带有“display:none”的 css 以及 option 标签中的属性“disabled”会从列表中删除该选项并且它不会出现不再。

<html><body>
    <select>
      <option disabled style="display:none">Hola</option>
      <option>Hello</option>
      <option>Ciao</option>
    </select>
</body></html>

感谢@achecopar 的帮助

于 2013-10-09T11:22:50.703 回答
2

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

你也可以找到一些其他的工作，但我认为它不会在所有浏览器中都是一致的

于 2013-10-09T11:59:24.873 回答
1

在这篇文章中有一种在选择中隐藏选项的技术：How to hide a <option> in a <select> menu with CSS?

于 2013-10-09T11:14:53.107 回答
0

你需要这个吗...

<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

于 2013-10-09T11:59:08.540 回答
0

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

jQuery(selector).toggleOption(true); // show option
jQuery(selector).toggleOption(false); // hide option
于 2013-10-09T11:54:23.573 回答