Jquery 检查所有选择元素 selectedIndex 是否为 0

Question

我有一个日历范围的 4 个选择元素，我想检查使用选择器选择的所有选择元素是否都选择了第一个选项（selectedIndex 为 == 0）。我什至可以检查它们的值是否都不是 "" 但似乎没有任何效果。

<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>

所以，我只想在它们都具有 selectedIndex == 0 或值为 "" 的情况下进入我的 if 语句。

我尝试过的一些事情

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)
{
 ...
}

我在一个选择中找到了答案，选择了第一个选项，但没有检查所有选择。

任何帮助将不胜感激。谢谢

Answer 1

这是一个可能的解决方案：

<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

尝试使用.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>