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

Getting animated with dynamic options

Conquer dynamic count

Working with select elements often includes updating options on-the-fly. Stay on top of these changes using the .on() method:

$('#mySelect').on('change', function() {
  var freshCount = $(this).find('option').length;
  console.log('Dynamic option count: ' + freshCount);
});


Master manipulations

Add a new option and then update the count:

$('#mySelect').append($('<option>', { value: 'new', text: 'New Option' }));
var updatedCount = $('#mySelect option').length;
// Who's the new kid on the block?


Updated count, after the last option gets removed:

$('#mySelect option:last').remove();
var minusOneCount = $('#mySelect option').length;
// Bye,bye, last in line!


With a twist of specificity

Want to count specific option elements only? Get creative with your selectors:

// Let's count the 'special' options
var specificValueCount = $("#mySelect option[value='special']").length;

// And how about those with a certain class?
var classCount = $("#mySelect option.myClass").length;
// Because specific options matter!


AJAX-loaded content handled right

When dealing with AJAX-loaded options, you might need to apply the selector after populating:

$.ajax({
  url: 'path/to/options', // Replace with your URL
  success: function(data) {
    $('#mySelect').html(data); // Fresh options coming in!
    alert('Option count: ' + $('#mySelect option').length);
    // Fresh count to match fresh options!
  }
});


Embrace efficiency

When possible, using a cached selector is a wise move for performance:

var $mySelect = $('#mySelect');
var countOptions = $mySelect.find('option').length;
// Cash in with cached selectors!


The goofs to avoid

• .size() is deprecated as of jQuery 1.8. Stick with .length.
• IDs are unique, ensure yours is one of a kind in DOM.
• Skipped the Intro to jQuery lecture? Remember, jQuery starts counting from zero!