Jquery check all select elements selectedIndex is 0

Question

I have a 4 select elements for a calendar range and I want to check if ALL of select elements chosen with the selector have the first option selected (selectedIndex is == 0). I'd even be ok with checking that the value of all of them isn't "" but nothing seems to be working.

<select name="startMonth" class="selCalendar">
 <option value="">Month</option>
 <option value="1">January</option>
 <option value="2">February</option>
 ...
 <option value="12">December</option>
</select>

<select name="startYear" class="selCalendar">
 <option value="">Year</option>
 <option value="1950">1950</option>
 <option value="1951">1951</option
 ....
 <option value="2015">2015</option
</select>

<select name="endMonth" class="selCalendar">
 <option value="">Month</option>
 <option value="1">January</option>
 <option value="2">February</option>
 ...
 <option value="12">December</option>
</select>

<select name="endYear" class="selCalendar">
 <option value="">Year</option>
 <option value="1950">1950</option>
 <option value="1951">1951</option
 ....
 <option value="2015">2015</option
</select>

So, I only want to get into my if statement if ALL of them have a selectedIndex == 0 or have a value of "".

Some of the things I've tried

if ( $( ".selCalendar" ).filter('option[value=""]').length )
{
 ...
}

if ( $(".selCalendar option[value='']" ).attr('selected', 'selected').length )
{
 ...
}

if( $( ".selCalendar option:selected" ).index() > 0)
{
 ...
}

if ( $(".selCalendar option:selected").length)
{
 ...
}

I have found answers on a single select with the first option selected but not checking all the selects.

Any help would be appreciated. Thanks

Answer 1

Here's a possible solution:

<select name="startMonth" class="selCalendar">
 <option value="">Month</option>
 <option value="1">January</option>
 <option value="2">February</option>
 <option value="12">December</option>
</select>

<select name="startYear" class="selCalendar">
 <option value="">Year</option>
 <option value="1950">1950</option>
 <option value="1951">1951</option>
 <option value="2015">2015</option>
 </select>

<select name="endMonth" class="selCalendar">
 <option value="">Month</option>
 <option value="1">January</option>
 <option value="2">February</option>
 <option value="12">December</option>
</select>

<select name="endYear" class="selCalendar">
 <option value="">Year</option>
 <option value="1950">1950</option>
 <option value="1951">1951</option>
 <option value="2015">2015</option>
</select>

<input type="button" value="Check" id="myButton" />

javascript

$("#myButton").click(function() {
    var isAllBlank = true;
    $(".selCalendar").each(function() {
        if($(this).val() !== "") {
            isAllBlank = false;   
        }
    });

    alert(isAllBlank);
});

JSFiddle Demo

Answer 2

Try utilizing .is()

var res = $(".selCalendar").is(function(i, el) {
  return el.selectedIndex === 0
});
// do stuff 
// if all `.selCalendar` `selectedIndex === 0` 
if (res) {
  alert("all `.selCalendar` `selectedIndex === 1`")
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="startMonth" class="selCalendar">
  <option value="">Month</option>
  <option value="1">January</option>
  <option value="2">February</option>
  <option value="12">December</option>
</select>

<select name="startYear" class="selCalendar">
  <option value="">Year</option>
  <option value="1950">1950</option>
  <option value="1951">1951</option>
  <option value="2015">2015</option>
</select>

<select name="endMonth" class="selCalendar">
  <option value="">Month</option>
  <option value="1">January</option>
  <option value="2">February</option>
  <option value="12">December</option>
</select>

<select name="endYear" class="selCalendar">
  <option value="">Year</option>
  <option value="1950">1950</option>
  <option value="1951">1951</option>
  <option value="2015">2015</option>
</select>