CODEWITHSUNDEEP
javascriptjquery
Jeeva
Jeeva

Reputation: 642

Visible Html select option showing under hidden items

Below is a simple select tag with dummy items.

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

Now from above am trying to get only the visible options length using jquery like below but am getting 0 as output but when getting hidden options length am getting it as 20. Below is the jquery i've used. Can someone help me get the length as 6 as there is only 6 visible options.

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

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

Upvotes: 0

Views: 82

Answers (2)

Shahjahan
Shahjahan

Reputation: 552

How about this one, This will count your visible and hidden options

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

Upvotes: 2

Joscha
Joscha

Reputation: 240

Just to clarify what is happening here: Your select is closed - this means even tho your Items are there they are hidden. The :visible selector only detects items that take up any space. Iterating over your options and checking for display none will do the trick

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>

Upvotes: 0

Related Questions