Counting the number of options in a select drop down (multiple on same page)

Question

I am trying to output the number of options in a select drop down, but there are multiple ones on the same page.

For example:

<select name="select" class="drop">
   <option name="option" value="Option 1"></option>
</select>

<select name="select" class="drop">
   <option name="option" value="Option 1"></option>
   <option name="option" value="Option 2"></option>
   <option name="option" value="Option 3"></option>
</select>

So the first one would output (1) and the second would output (3).

I have this code but it outputs (4) - counting all options from all selects.

<script type="text/javascript">
$(function() {
   $(".date_number").text($(".drop option").length + " items");
});
</script>

Any help appreciated!

Answer 1

Using the selector ".drop option" will get all the option elements under (not necessarily direct children) of an element with class ".drop".

Note that this does not only is valid for select element but also with this:

<div class="drop">
    <select>
        <option>Item 1</option>
        <option>Item 2</option>
        <option>Item 3</option>
    </select>
</div>

$('.drop option').length // 3

To ensure your <option> elements children of <select class="drop">, use the children selector >:

$('.drop > option');

---

To get separately the amount of options for each select, you would select the <select> first and then count for each of then. You can do something like:

var optionsArr = $('select.drop').map(function() {
                     return $(this).find('option:not(:disabled)').length;
                 }).toArray();

This will return an array with the different amounts: [1, 3]

DEMO

---

To add a div with the the text "3 date(s) available", do this:

$('select.drop').each(function() {
    // the current select.drop
    var $this = $(this);
    // create a div with the text you want
    $('<div>' + $this.find('option:not(:disabled)').length + ' date(s) available</div>')
        // append it after the current select.drop
        .insertAfter($this);
});

///////////////////////

Ok, nearly there! Thanks again for your time on this...

I have put the code in and it is doing what I want it to do, however due to the fact that it is all in an Accordion, it loops each time for each accordion item. See screenshot (excuse styling):

I just need it to now only loop for the select drop in that accordion, rather than for each one.

Also, in my Select fro down, I have the first Option as "Disabled" as part of the validation so that the user has to select an item before continuing, such as:

<option disabled="disabled"></option>

The javascript is also counting this. So is there any way we can put a -1 in there to the result, or is there a better way of doing this that I am missing?

Thanks again...