CODEWITHSUNDEEP
javascriptjqueryhtml
Mercy
Mercy

Reputation: 2271

Counting the number of option tags in a select tag in jQuery

How do I count the number of <option>s in a <select> DOM element using jQuery?

<select data-attr="dropdown" id="input1">
  <option value="Male" id="Male">Male</option>
  <option value="Female" id="Female">Female</option>
</select>

I want to find the number of <option> tags in the <select> DOM element, since with that I want to open the settings panel with that number of input fields with the corresponding option value from the drop-down box in it and to change it again in the preview panel.

The above drop-down box is in my preview panel which is generated by jQuery.

Upvotes: 184

Views: 284906

Answers (9)

user1587804
user1587804

Reputation: 131

This is giving the count of all the available options exactly as the question asked. Its useful if you already have the node in a variable

Upvotes: 0

Sadikhasan
Sadikhasan

Reputation: 18600

You can use either length property and length is better on performance than size.

$('#input1 option').length;

OR you can use size function like (removed in jQuery v3)

$('#input1 option').size(); 


$(document).ready(function(){
   console.log($('#input1 option').size());
   console.log($('#input1 option').length);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select data-attr="dropdown" id="input1">
   <option value="Male" id="Male">Male</option>
   <option value="Female" id="Female">Female</option>
</select>

Upvotes: 32

zak
zak

Reputation: 876

Another approach that can be useful.

$('#select-id').find('option').length

Upvotes: -1

nightingale2k1
nightingale2k1

Reputation: 10335

$('#input1 option').length;

This will produce 2.

Upvotes: 299

Ricardo L&#243;pez Garc&#237;a
Ricardo L&#243;pez Garc&#237;a

Reputation: 143

The best form is this 

$('#example option').length

Upvotes: 7

Philip
Philip

Reputation: 3799

In a multi-select option box, you can use $('#input1 :selected').length; to get the number of selected options. This can be useful to disable buttons if a certain minimum number of options aren't met.

function refreshButtons () {
    if ($('#input :selected').length == 0)
    {
        $('#submit').attr ('disabled', 'disabled');
    }
    else
    {
        $('#submit').removeAttr ('disabled');
    }
}

Upvotes: 15

workdreamer
workdreamer

Reputation: 2856

Ok, i had a few problems because i was inside a 

$('.my-dropdown').live('click', function(){  
});

I had multiples inside my page that's why i used a class.

My drop down was filled automatically by a ajax request when i clicked it, so i only had the element $(this)

so...

I had to do:

$('.my-dropdown').live('click', function(){
  total_tems = $(this).find('option').length;
});

Upvotes: 6

karim79
karim79

Reputation: 342635

The W3C solution:

var len = document.getElementById("input1").length;

Upvotes: 63

cletus
cletus

Reputation: 625077

Your question is a little confusing, but assuming you want to display the number of options in a panel:

<div id="preview"></div>

and

$(function() {
  $("#preview").text($("#input1 option").length + " items");
});

Not sure I understand the rest of your question.

Upvotes: 19

Related Questions