How to get the count of selected values in a dropdown using jQuery.

Question

Hi, i have a HTML like this. I need to get the selected value's count using the tag. How to do that using jQuery.

<select id="availability1">
  <option value="Available">Available</option>
  <option selected="selected" value="Scheduled">Scheduled</option>
  <option value="Unavailable">Unavailable</option>
</select>

<select id="availability2">
  <option value="Available">Available</option>
  <option value="Scheduled">Scheduled</option>
  <option selected="selected" value="Unavailable">Unavailable</option>
</select>

<select id="availability3">
  <option value="Available">Available</option>
  <option value="Scheduled">Scheduled</option>
  <option selected="selected" value="Unavailable">Unavailable</option>
</select>

<select id="availability4">
  <option value="Available">Available</option>
  <option selected="selected" value="Scheduled">Scheduled</option>
  <option value="Unavailable">Unavailable</option>
</select>

How to get the selected values which are Scheduled. The ids have a pattern availability(X). How to write this using jQuery. The output I expect is 2 since there are two selected tags which are Scheduled.

Thanks.

Answer 1

You could do something like this using .filter() and .length:

var scheduled = ​$("select").filter(function() {
                  return $(this).val() == "Scheduled";
                })​​​​​​;
alert(scheduled.length);​

You can give it a try here, this takes all the <select> elements, then does a .filter() to get the ones with a selected value of "Scheduled", then we're just alerting the .length to see how many of those there were.