Html 为什么总是显示最后一个选择选项，即使已设置样式

在回答另一个问题时，我遇到了一个奇怪的错误。快速搜索未找到现有问题，因此：

JSFiddle： 问：为什么

Item5

总是显示，即使它被设置为隐藏<代码>项目4不可见。注意：我正在最新版本的Chrome中测试这一点

更新： 不同的人在不同的浏览器上得到不同的结果。以下（来自下面的答案）适用于Chrome，但不适用于最新的IE（显示了项目4和项目5）：

原来这个问题以前也遇到过（毫不奇怪）：但令人惊讶的是浏览器不支持删除样式选项。算了吧

试试这段代码

.hidden {
    visibility: hidden;
}

用于显示或隐藏元素，包括元素周围的框架和背景。隐藏图元时，尽管该图元未显示在占据该图元的位置，但该图元仍保留在该图元上。如果屏幕上相同位置的不同元素的预期输出要绕过此功能，则应使用绝对定位，或使用属性显示。

尝试此代码

.hidden {
    visibility: hidden;
}

---

用于显示或隐藏元素，包括元素周围的框架和背景。隐藏图元时，尽管该图元未显示在占据该图元的位置，但该图元仍保留在该图元上。如果屏幕上同一位置不同元素的预期输出要绕过此功能，则应使用绝对定位，或使用属性显示。

使用CSS设置样式

选项

元素不是可靠的解决方案，因为用户代理实现此功能的方式非常不同且不标准。我不认为这是一个bug，因为在

选项

元素的规范中没有

样式

属性定义：

您可以使用禁用的

属性：

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

演示：

或者使用jQuery:
$（'[disabled]'）。remove（）

更新：
基于这些评论和新的需求，我在这里用数据属性做了一个小的切换演示：
样式化
选项
使用CSS的元素不是一个可靠的解决方案，因为用户代理实现这一点非常不同且不标准。我不认为这是一个bug，因为在
选项
元素的规范中没有
样式
属性定义：

您可以使用禁用的
属性：

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

演示：

或者使用jQuery:
$（'[disabled]'）。remove（）

更新：
基于这些评论和新的要求，我在这里用数据属性做了一个小的切换演示：
您最好的方法（跨浏览器解决方案）是使用jquery存储隐藏的值。它也可以通过普通javascript来完成

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

然后，当您需要它们时，您可以将它们放入
数组中

更新

这是最新的小提琴：

我添加了两个按钮来显示如何处理存储的隐藏值（将它们添加回select，或删除它们）
最好的方法（跨浏览器解决方案）是使用jquery存储隐藏值。它也可以通过普通javascript来完成

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

然后，当您需要它们时，您可以将它们放入
数组中

更新

这是最新的小提琴：

我添加了两个按钮来显示如何处理存储的隐藏值（将它们添加回选择或删除）
它在我的浏览器上没有显示。在Chromerely strange bug中也可以看到项目4。。我登录了safari，出现了第4项和第5项。@Rakeshhetty好的，在OSX中都有。这不是一个新问题，人们已经面临这个问题很久了。。请参阅此链接。它没有显示在我的浏览器上。项目4也可以在Chromerely奇怪的bug中看到。。我登录了safari，出现了第4项和第5项。@Rakeshhetty好的，在OSX中都有。这不是一个新问题，人们已经面临这个问题很久了。。请参阅此链接。划伤那个。。。IE仍然显示项目4和项目5。。。这是最奇怪的事情。事实证明，您无法在不同浏览器中一致地设置
select
选项的样式。您需要动态更改列表内容。参考：划伤那个。。。IE仍然显示项目4和项目5。。。这是最奇怪的事情。事实证明，您无法在不同浏览器中一致地设置
select
选项的样式。您需要动态更改列表内容。参考：这只会使它们变灰。我发现的最初问题只是想把它们隐藏起来：@TrueBlueAussie
disabled
的视觉外观不是强制的，但至少是语义上的。这里我只是指规范，如果
disabled
不是您的选项，请使用DOM操纵。CSS或内联样式不是标准的，因此不可靠，这是我的观点。正确：内联样式也不起作用。根据Kheema Pandey在这里发现的问题：这是浏览器中的一个已知缺陷。@TrueBlueAussie完全正确，但我不会称之为缺陷，因为规范根本不包括
选项
元素的
样式
属性。因此，基本上是由每个用户代理自行实现的，它似乎也有操作系统的变化。好吧，如果不是一个缺陷，我会称之为无法设置
选项的样式
是一个严重的设计缺陷：）这只会使它们变灰。我发现的最初问题只是想把它们隐藏起来：@TrueBlueAussie
disabled
的视觉外观不是强制的，但至少是语义上的。这里我只是指规范，如果
disabled
不是您的选项，请使用DOM操纵。CSS或内联样式不是标准的，因此不可靠，这是我的观点。正确：内联样式也不起作用。根据Kheema Pandey在这里发现的问题：这是浏览器中的一个已知缺陷。@TrueBlueAussie确切地说，但我不会称之为缺陷，
var array = $(".hidden");
$(".hidden").remove();