可见选项元素的长度始终显示为“0”

Question

我只想知道 length 个可见的 option 个元素。

所有元素的相同值是必须有。

下面的代码总是显示0.

请帮忙。

$('select option[data-id=2]').hide();
var exist = $('select option[value=1]:visible').length;
alert(exist);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value='1'>test 1</option>
  <option value='1' data-id='2'>test 2</option>
</select>

截图：

Answer 1

$('select option[data-id=2]').hide();

var length = $('select option[value=1]').filter(function() {
     return $(this).css('display') != 'none';
}).length;

alert(length);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value='1'>test 1</option>
  
  <option value='1' data-id='2'>test 2</option>
</select>

试试这种检查方式。过滤它然后检查是否显示块然后进行长度计数

Answer 2

我在 Firefox 中运行时得到 1，但在 Chrome 中运行时得到 0。

问题似乎出在 Chrome 运行显示整个 select 元素之前的代码，而 Firefox 运行显示 [= 之后的代码49=]元素.

以下在 Firefox 中显示 2 后跟 0，而在 Chrome 中显示 0 后跟 2。

var exist = $('option:visible').length;
alert(exist);
exist = $('option:hidden').length;
alert(exist);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value='1'>test 1</option>
  <option value='1' data-id='2'>test 2</option>
</select>

guradio 所述的解决方案有效，因为您正在检查该选项是否具有此属性 display，对于可见的选项，它未定义，因此没有 none, 所以条件为真.

但是，您的代码询问 jQuery 此元素是否实际可见，无论显示如何属性。

我不确定为什么 Chrome 真的会这样，即使我将代码放在独立的 html 页面中，问题仍然存在。

编辑：

似乎 Owen 指出了不同浏览器之间的未定义行为，尽管 jQuery states clearly 所有选项都被认为是隐藏的，而不管显示属性，我们可以从 Firefox 的行为来看。

总而言之，您最好坚持设置并检查 display 属性是否符合您的要求，并使用其他 select 或 :selected 和 :not(:selected) 表示否定。

可见选项元素的长度始终显示为“0”

Length of visible option elements always shows `0`

jquery

select

option