jQuery check how many select elements have selectedIndex !== 0

I have multiple select elements in my page and I need to find out how many of the elements do have a selectedIndex !== 0

<select name="startMonth" class="selCalendar">
 <option value="">select</option>
 <option value="1" selected>Opt1</option>
 <option value="2">Opt2</option>
 <option value="4">Opt3</option>
</select>

<select name="startYear" class="selCalendar">
 <option value="">select</option>
 <option value="1">Opt1</option>
 <option value="2">Opt2</option>
 <option value="3">Opt3</option>
 </select>

<select name="endMonth" class="selCalendar">
 <option value="">select</option>
 <option value="1">Opt1</option>
 <option value="2">Opt2</option>
 <option value="3" selected>Opt3</option>
</select>

<select name="endYear" class="selCalendar">
 <option value="">select</option>
 <option value="1">Opt1</option>
 <option value="2">Opt2</option>
 <option value="3">Opt3</option>
</select>

I tried filter and localStorage Objects on Change, but no succes.... Any help would be appreciated. Thanks!

Solution

You can do this within the jquery selector directly:

$(".selCalendar option[value!='']:selected")

Example:

$("#click").click(function() {

  var chosen = $(".selCalendar option[value!='']:selected");

  console.log(chosen.length)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="startMonth" class="selCalendar">
 <option value="">select</option>
 <option value="1" selected>Opt1</option>
 <option value="2">Opt2</option>
 <option value="4">Opt3</option>
</select>

<select name="startYear" class="selCalendar">
 <option value="">select</option>
 <option value="1">Opt1</option>
 <option value="2">Opt2</option>
 <option value="3">Opt3</option>
 </select>

<select name="endMonth" class="selCalendar">
 <option value="">select</option>
 <option value="1">Opt1</option>
 <option value="2">Opt2</option>
 <option value="3" selected>Opt3</option>
</select>

<select name="endYear" class="selCalendar">
 <option value="">select</option>
 <option value="1">Opt1</option>
 <option value="2">Opt2</option>
 <option value="3">Opt3</option>
</select>

<button type='button' id='click'>count</button>

Or you can use filter with a callback on the selects:

$(".selCalendar").filter(function(i, e) {
    return $(e).val() !== "";
});

$("#click").click(function() {
  var chosen = $(".selCalendar").filter(function(i, e) {
    return $(e).val() !== "";
  });

  console.log(chosen.length)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="startMonth" class="selCalendar">
 <option value="">select</option>
 <option value="1" selected>Opt1</option>
 <option value="2">Opt2</option>
 <option value="4">Opt3</option>
</select>

<select name="startYear" class="selCalendar">
 <option value="">select</option>
 <option value="1">Opt1</option>
 <option value="2">Opt2</option>
 <option value="3">Opt3</option>
 </select>

<select name="endMonth" class="selCalendar">
 <option value="">select</option>
 <option value="1">Opt1</option>
 <option value="2">Opt2</option>
 <option value="3" selected>Opt3</option>
</select>

<select name="endYear" class="selCalendar">
 <option value="">select</option>
 <option value="1">Opt1</option>
 <option value="2">Opt2</option>
 <option value="3">Opt3</option>
</select>

<button type='button' id='click'>count</button>