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

时间:2015-06-17 23:09:43

标签: jquery selector options

我有一个日历范围的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>

所以,我只想进入我的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)
{
 ...
}

我在选择了第一个选项的单个选择中找到了答案,但未检查所有选择。

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

2 个答案:

答案 0 :(得分:2)

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

<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

答案 1 :(得分:0)

尝试使用.is()

&#13;
&#13;
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`")
};
&#13;
<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>
&#13;
&#13;
&#13;