Demo here http://jsfiddle.net/Wener/WC9yy/
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属性 ？
请参阅更新部分
我认为你不能只使用 CSS 来为所有浏览器做到这一点，你需要一些 JS 代码，之前有一个非常相似的问题：
如何使用CSS隐藏菜单中的？ https://stackoverflow.com/questions/9234830/how-to-hide-a-option-in-a-select-menu-with-css
在 Chrome (v. 30) 中“display:none”不起作用，但是在 Firefox (v. 24) 中它可以工作，带有“display:none”的选项不会出现在列表中。
UPDATE2:
在当前的 Chrome (v. 70) 和 Firefox (v. 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 的帮助
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
