如何在带有CSS的<select>菜单中隐藏<选项>？

Question

如何在带有CSS的<select>菜单中隐藏<选项>？

我意识到Chrome似乎不允许我隐藏<option>在.<select>..火狐会的。

我要藏起来<option>与搜索标准相匹配的。在Chrome Web工具中，我可以看到它们被正确地设置为display: none;我的JavaScript，但是有一次<select>单击菜单，就会显示它们。

我怎么做这些<option>与我的搜索标准相匹配的是，单击菜单时不显示吗？谢谢!

Answer 1

您必须实现两个隐藏方法。display: none适用于FF，但不适用于Chrome或IE。因此，第二个方法是包装<option>在.<span>带着display: none..FF不会这么做(技术上无效的HTML，根据规范)，但是Chrome和IE会，它会隐藏这个选项。编辑：噢，是的，我已经用jQuery实现了这个：jQuery.fn.toggleOption&nbsp;=&nbsp;function(&nbsp;show&nbsp;)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;jQuery(&nbsp;this&nbsp;).toggle(&nbsp;show&nbsp;); &nbsp;&nbsp;&nbsp;&nbsp;if(&nbsp;show&nbsp;)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(&nbsp;jQuery(&nbsp;this&nbsp;).parent(&nbsp;'span.toggleOption'&nbsp;).length&nbsp;) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;jQuery(&nbsp;this&nbsp;).unwrap(&nbsp;); &nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(&nbsp;jQuery(&nbsp;this&nbsp;).parent(&nbsp;'span.toggleOption'&nbsp;).length&nbsp;==&nbsp;0&nbsp;) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;jQuery(&nbsp;this&nbsp;).wrap(&nbsp;'<span&nbsp;class="toggleOption"&nbsp;style="display:&nbsp;none;"&nbsp;/>'&nbsp;); &nbsp;&nbsp;&nbsp;&nbsp;}};编辑2：下面是如何使用这个函数：jQuery(selector).toggleOption(true);&nbsp;//&nbsp;show&nbsp;optionjQuery(selector).toggleOption(false);&nbsp;//&nbsp;hide&nbsp;option编辑3：添加@user 1521986建议的额外检查

Answer 2

对于HTML 5，可以使用“隐藏”属性。<option&nbsp;hidden>Hidden&nbsp;option</option>它是不但如果您只需要隐藏几个元素，那么与添加/删除元素或不进行语义正确的构造相比，最好将隐藏属性与禁用的属性组合起来。<select>&nbsp;<option>Option1</option>&nbsp;<option>Option2</option>&nbsp;<option&nbsp;hidden>Hidden&nbsp;Option</option>&nbsp;</select>参照系.