JSFiddle：http://jsfiddle.net/TrueBlueAussie/93D3h/4/

<select>
    <option>Item1</option>
    <option>Item2</option>
    <option>Item3</option>
    <option class="hidden">Item4</option>
    <option class="hidden">Item5</option>
</select>

CSS：

.hidden {
    display: none;
}

问：为什么始终显示Item5，即使它被设为隐藏？ Item4不可见。注意：我在最新版本的Chrome中对此进行了测试。

更新

不同的人在不同的浏览器上获得不同的结果。以下（从下面的回答）适用于Chrome，但最新IE上的不（显示Item4和Item5）：

.hidden {
    visibility: hidden;
}

原来这个问题已经被打过（毫不奇怪）：How to hide a <option> in a <select> menu with CSS?但令人惊讶的是浏览器不支持删除带样式的选项。去图！

Answer 1

使用CSS设置样式OPTION元素不是一个可靠的解决方案，因为用户代理实现的方式非常不同且非标准。我不会将此称为错误，因为style元素的规范中没有OPTION属性定义：http://www.w3.org/TR/html401/interact/forms.html#h-17.6

您可以改为使用disabled属性：

<select>
    <option>Item1</option>
    <option>Item2</option>
    <option>Item3</option>
    <option disabled>Item4</option>
    <option disabled>Item5</option>
</select>

和/或使用JavaScript来操纵DOM。一个很好的开始是将disabled元素作为语义回退的目标：

[].forEach.call(document.querySelectorAll('*[disabled]'), function(element) {
  element.parentNode.removeChild(element)
})

演示：http://jsfiddle.net/93D3h/15/

或者使用jQuery：$('[disabled]').remove()

<强>更新根据评论和新要求，我在此处使用数据属性进行了小型切换演示：http://jsfiddle.net/95Ed5/

Answer 2

试试这段代码

.hidden {
    visibility: hidden;
}

旨在显示或隐藏元素，包括围绕它的框架和背景。当你隐藏一个元素时，虽然它没有显示在一个占据元素的地方。如果屏幕上同一位置的不同元素的预期输出绕过此功能应使用绝对定位，或使用属性显示。

Answer 3

您最好的镜头（跨浏览器解决方案）将使用jquery来存储隐藏的值。它也可以通过常规的javascript来完成。

var array = $(".hidden");
$(".hidden").remove();

然后当你需要它们时，你会在array

中得到它们

<强>更新

这是更新的小提琴：http://jsfiddle.net/93D3h/16/
我添加了两个按钮来显示你可以用存储的隐藏值做什么（将它们添加回选择，或删除它们）

为什么始终显示最后一个选择选项，即使在样式化时也是如此

JSFiddle：http://jsfiddle.net/TrueBlueAussie/93D3h/4/

更新

3 个答案: