Question

下面是带有伪项目的简单选择标签。

<select name="dummySel" id="dummySel">
    <option value="a" style="display: none;">a</option>
    <option value="b" style="display: none;">b</option>
    <option value="c" style="display: none;">c</option>
    <option value="d" style="display: none;">d</option>
    <option value="e" style="display: none;">e</option>
    <option value="f" style="display: none;">f</option>
    <option value="g" style="display: none;">g</option>
    <option value="h" style="display: none;">h</option>
    <option value="i" style="display: none;">i</option>
    <option value="j" style="display: none;">j</option>
    <option value="k" style="display: none;">k</option>
    <option value="l" style="">l</option>
    <option value="m" style="">m</option>
    <option value="n" style="">n</option>
    <option value="o" style="">o</option>
    <option value="p" style="">p</option>
    <option value="q" style="">q</option>
    <option value="r" style="display: none;">r</option>
    <option value="s" style="display: none;">s</option>
    <option value="t" style="display: none;">t</option>
</select>

现在从上面开始尝试使用如下所示的jquery仅获取可见选项的长度，但输出为0，但在获取隐藏选项时将其获取为20。以下是我使用的jquery。有人可以帮我把长度设为6，因为只有6个可见选项。

$('#dummySel option:hidden').length;  // Output - 20

$('#dummySel option:visible').length; // Output - 0

Answer 1

这个怎么样，它将计算您的可见和隐藏选项

var visible_options = 0, hidden_options = 0;
$("#dummySel option").each(function () {
    if($(this).css('display') !== "none")
       visible_options++;
    else
       hidden_options++;
});

Answer 2

只是为了澄清这里发生的事情：您的选择已关闭-这意味着即使您的项目在那里，它们也被隐藏了。：visible选择器仅检测占用任何空间的项目。遍历您的选项并检查是否没有显示可以解决问题

var length = 0;
$('#dummySel option').each(function () {
    if ($(this).css('display') != 'none') {
        length++;
    }
});
console.log(length);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="dummySel" id="dummySel">
    <option value="a" style="display: none;">a</option>
    <option value="b" style="display: none;">b</option>
    <option value="c" style="display: none;">c</option>
    <option value="d" style="display: none;">d</option>
    <option value="e" style="display: none;">e</option>
    <option value="f" style="display: none;">f</option>
    <option value="g" style="display: none;">g</option>
    <option value="h" style="display: none;">h</option>
    <option value="i" style="display: none;">i</option>
    <option value="j" style="display: none;">j</option>
    <option value="k" style="display: none;">k</option>
    <option value="l" style="">l</option>
    <option value="m" style="">m</option>
    <option value="n" style="">n</option>
    <option value="o" style="">o</option>
    <option value="p" style="">p</option>
    <option value="q" style="">q</option>
    <option value="r" style="display: none;">r</option>
    <option value="s" style="display: none;">s</option>
    <option value="t" style="display: none;">t</option>
</select>

可见HTML选择选项显示在隐藏项下

2 个答案: