javascript - 可见 Html 选择选项显示在隐藏项目下

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++;
});