如何检查多个选择元素（*不是*多选）是否具有值？

Question

我有几个选择元素：

<select id='foo1'>
    <option value=''></option>
    <option value='foo'>asdf</option>
    <option value='bar'>asdfasdf</option>
</select>

<select id='foo2'>
    <option value=''></option>
    <option value='foo'>asdf</option>
    <option value='bar'>asdfasdf</option>
</select>

<select id='foo3'>
    <option value=''></option>
    <option value='foo'>asdf</option>
    <option value='bar'>asdfasdf</option>
</select>

有没有一种简单的方法可以检查每个选择的值是不是第一个空值而不使用循环或每个方法的jQuery？我可以用循环来做，但我宁愿使用单个选择器。

$("[id^=foo]").val();

可悲的是，没有工作。有没有简单的方法在一行代码中使用jQuery执行此操作，或者我是否必须编写循环或使用.each？

Answer 1

您可以使用：

if($('[id^=foo] [value=""]:selected').length === 0)
    //All selects have a value

＆＃13;

＆＃13;

$('select').change(function(){
    if($('[id^=foo] [value=""]:selected').length === 0)
        alert('all are selected');
    else
        alert('At least one is not selected');
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id='foo1'>
    <option value=''></option>
    <option value='foo'>asdf</option>
    <option value='bar'>asdfasdf</option>
</select>

<select id='foo2'>
    <option value=''></option>
    <option value='foo'>asdf</option>
    <option value='bar'>asdfasdf</option>
</select>

<select id='foo3'>
    <option value=''></option>
    <option value='foo'>asdf</option>
    <option value='bar'>asdfasdf</option>
</select>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以通过过滤并检查其length属性来实现此目的。

if($('[id^=foo]').filter(function(){ return $(this).val() !== '' }).length == 3){
   // every select has a value
} else  { 
   // at least one select doesn't have a value
} 

Answer 3

$("select").each(function(){
    var Sel = $(this).attr("id");
    if($(this).val()==""){
        alert("select "+ Sel +" has no value!");
    }
    else{
         alert("select "+ Sel +" has a value!");
    }
});