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

Question

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

所有元素的相同值必须。

以下代码始终显示0。

请帮忙。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

截图：

Answer 1

＆＃13;

＆＃13;

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

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

alert(length);

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 2

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

似乎问题来自Chrome在显示整个select元素之前运行代码，其中Firefox在显示select元素后运行代码。

以下显示2在Firefox中后跟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属性以获得所需内容，并使用其他选择器（如:selected和:not(:selected)进行否定。