为什么最后选择选项总是显示，即使是样式化的

Question

在回答另一个问题时，我遇到了这个奇怪的bug。快速搜索没有找到一个存在的问题，所以这里是:

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

原来这个问题以前遇到过(毫不奇怪):如何隐藏<选项>在菜单与CSS?但令人惊讶的是，浏览器不支持删除带有样式的选项。去图!

Answer 1

使用CSS样式化OPTION元素不是一个可靠的解决方案，因为用户代理实现这个非常不同且非标准。我不认为这是一个bug，因为在OPTION元素的规范中没有style属性定义: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;
}

用于显示或隐藏元素，包括元素周围的框架和背景。当您隐藏一个元素时，虽然它没有显示在包含该元素的位置，但它仍然在该元素上。如果希望输出的不同元素在屏幕上的同一位置绕过此功能，则应使用绝对定位，或使用display属性

Answer 3

最好的方法(跨浏览器解决方案)是使用jquery来存储隐藏值。

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

当你需要它们的时候你可以在array

找到它们

这是更新后的小提琴:http://jsfiddle.net/93D3h/16/
我添加了两个按钮来展示如何处理存储的隐藏值(将它们添加回select或删除它们)