CODEWITHSUNDEEP
javascriptjquery
Aman Gupta
Aman Gupta

Reputation: 1874

How to calculate the no of options in a select tag that are not disabled and has display none property

I have a select tag that has options and at some point some of the options are disabled and hidden. I want to get the size or length of the options.

I tried 

$("#input option :enabled").size();

And :

x=$("#input option").length
y=$("#input option :disabled").length;
count = x-y;

Can anyone please help

Upvotes: 2

Views: 915

Answers (3)

rrk
rrk

Reputation: 15846

This cannot be done with simple selectors.

length = $("#input option:not(:disabled)").filter(function(){
  return $(this).css('display') != 'none';
}).length;
console.log(length);
document.getElementById('result').innerHTML = length;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select id="input">
  <option disabled="true">1</option>
  <option disabled="true">2</option>
  <option disabled="true">3</option>
  <option style="display:none;">4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>0</option>
</select>
<div id="result"></div>

Upvotes: 1

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

You could use jQuery .filter() function, and using two conditions, first check for options that are not disabled, and second it this ones has display=none, check example below.

Hope this helps.

var options_length = $("#input option").filter(function() { 
    return $(this).css("display") == "none" && $(this).not(':disabled')
}).length;

alert(options_length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select" id='input'>
  <option value="value1">Valeur 1</option> 
  <option value="value2" selected>Valeur 2</option>
  <option value="value3" style='display:none'>Valeur 3</option>
  <option value="value4" disabled>Valeur 4</option>
  <option value="value5" disabled>Valeur 5</option>
  <option value="value6">Valeur 6</option>
  <option value="value7" style='display:none'>Valeur 7</option>
</select>

Upvotes: 1

The Process
The Process

Reputation: 5953

Use this

$("#input option:not(:hidden):not(:disabled)").length

Upvotes: 1

Related Questions