jQuery“可见”不适用于所有浏览器，但在 Firefox 中答案

【问题标题】：jQuery "visible" doesn't work in all browsers, but in FirefoxjQuery“可见”不适用于所有浏览器，但在 Firefox 中
【发布时间】：2011-12-10 20:56:50
【问题描述】：

我做了一个非常简单的小提琴here，你可以在不同的浏览器中查看。

它仅适用于 Firefox。换句话说，似乎$('#select-tag-id option:visible') 在其他浏览器中不起作用。怎么了？是 jQuery 的错误吗？

代码是：

<select id='items'>
    <option value='1' style='display: none;'>One</option>
    <option value='1' style='display: block;'>Two</option>
    <option value='1' style='display: block;'>Three</option>
    <option value='1' style='display: none;'>Four</option>
</select>

JavaScript（jQuery 代码）是：

$(function(){
    alert($('#items option:visible').length);
});

【问题讨论】：

bugs.jquery.com/ticket/14672
值得注意的是，multiple 属性不会影响任何浏览器中的结果，即使该属性会导致在选择的高度允许的范围内显示尽可能多的选项。

标签： jquery firefox jquery-selectors cross-browser

【解决方案1】：

这不是 jQuery 错误 - 只是（又一个）浏览器差异。

IE 不允许您在选项元素 (style.display='none' doesnt work on option tags) 上设置 display:none。

如果您在 FF 和 IE 中查看 fiddle，您会发现 <select> 在 IE 中仍然包含所有四个元素，但在 FF 中仅包含两个元素，无论是否存在 jQuery .

解决方案可能是实际删除元素并在需要时替换。

【讨论】：

好吧，好吧。让 IE 放在一边（就像这个该死的浏览器一样）。但是 Opera 或 Chrome 呢？他们不也支持display: none 选项吗？他们当然会。但似乎他们无法根据可见性状态过滤option 标签。
这个问题刚刚再次出现recently，初步研究似乎没有发现关于这种差异的任何事情，甚至在任何浏览器的公共错误跟踪器中也没有发现。多么古朴。我想这就是我们现在所拥有的。

【解决方案2】：

确实，:hidden 和 :visible 不适用于 <option>'s

您可以尝试使用disabled="disabled" 参见：

http://jsfiddle.net/sZR2f/7/

【讨论】：