Jquery 检查所有 select 个元素 selectedIndex 为 0

Question

我有一个日历范围的 4 个 select 元素，我想检查是否所有 select 元素都选择了 select 或第一个选项 selected（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>

所以，我只想进入我的 if 语句，如果它们都具有 selectedIndex == 0 或值为“”。

我尝试过的一些事情

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

我在第一个选项 select 上找到了单个 select 的答案，但没有检查所有 selects。

如有任何帮助，我们将不胜感激。谢谢

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>

Jquery 检查所有 select 个元素 selectedIndex 为 0

Jquery check all select elements selectedIndex is 0

jquery

options

selector