How do I check how many options there are in a dropdown menu?

JqueryDrop Down-Menu

Jquery Problem Overview


How do I check, using jQuery, how many options are there in a drop down menu?

Thanks.

Jquery Solutions


Solution 1 - Jquery

var length = $('#mySelectList').children('option').length;

or

var length = $('#mySelectList > option').length;

This assumes your <select> list has an ID of mySelectList.

Solution 2 - Jquery

$("#mydropdown option").length

Or if you already got a reference to it,

$(myDropdown).find("option").length

Solution 3 - Jquery

Use the length property or the size method to find out how many items are in a jQuery collection. Use the descendant selector to select all <option>'s within a <select>.

HTML:

<select id="myDropDown">
<option>1</option>
<option>2</option>
.
.
.
</select>

JQuery:

var numberOfOptions = $('select#myDropDown option').length

And a quick note, often you will need to do something in jquery for a very specific thing, but you first need to see if the very specific thing exists. The length property is the perfect tool. example:

   if($('#myDropDown option').length > 0{
      //do your stuff..
    } 

This 'translates' to "If item with ID=myDropDown has any descendent 'option' s, go do what you need to do.

Solution 4 - Jquery

Get the number of options in a particular select element

$("#elementid option").length

Solution 5 - Jquery

Click here to see a previous post about this

Basically just target the ID of the select and do this:

var numberOfOptions = $('#selectId option').length;

Solution 6 - Jquery

$('#idofdropdown option').length;

That should do it.

Solution 7 - Jquery

alert($('#select_id option').length);

Solution 8 - Jquery

$('#dropdown_id').find('option').length

Solution 9 - Jquery

$('select option').length;

or

$("select option").size()

Solution 10 - Jquery

With pure javascript you can just call the length on the id of the select box. It will be more faster. Typically with everything native javascript is performing better and better with modern browsers

This can be achieved in javascript by

     var dropdownFilterSite = document.querySelector( '#dropDownId' );  //Similar to jQuery

var length = dropdownFilterSite.length.

Good website for some learning

www.youmightnotneedjquery.com

A good video to watch by Todd Motto

https://www.youtube.com/watch?v=pLISnANteJY

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAsim ZaidiView Question on Stackoverflow
Solution 1 - Jqueryuser113716View Answer on Stackoverflow
Solution 2 - JqueryMatti VirkkunenView Answer on Stackoverflow
Solution 3 - JqueryAdamView Answer on Stackoverflow
Solution 4 - JquerySharjeel AzizView Answer on Stackoverflow
Solution 5 - JqueryMunzillaView Answer on Stackoverflow
Solution 6 - JqueryRob Stevenson-LeggettView Answer on Stackoverflow
Solution 7 - JqueryfantactukaView Answer on Stackoverflow
Solution 8 - JquerysecondView Answer on Stackoverflow
Solution 9 - JquerynicholasklickView Answer on Stackoverflow
Solution 10 - JqueryVatsalView Answer on Stackoverflow