jQuery 每页验证多个 select 选项

Question

我在一个页面表单上有很多 select 个框。我正在尝试找到一种方法来检查所有 select 选项，而不是对每个选项执行 if/else。

到目前为止，我已经尝试了 !== 和 != 以及空

<select name="fruits" id="fruits">
    <option value="0">-- Choose --</option>
    <option value="1">Apple</option>
    <option value="2">Orange</option>
</select>

<select name="cakes" id="cakes">
    <option value="0">-- Choose --</option>
    <option value="1">Chocolate</option>
    <option value="2">Strawberry</option>
</select>

<select name="breads" id="breads">
    <option value="0">-- Choose --</option>
    <option value="1">Garlic Bread</option>
    <option value="2">Baker Loaf</option>
</select>

我的 JavaScript (jQuery)

function checkEmpty(){
    var flag = 0;

    if(
        $('select').val()!=="" ||
        $('select').val()!=="-- Choose --" ||
        $('select').val()!=="0"){
            flag=1;
            $('select').addClass('error');
    } else {
            $('select').removeClass('error');
    }

    if(flag==1){
        alert('One or all options must be selected!');
    } else {
        console.log('The user made a selection');
    }

}

用户需要选择select个框之一或全部。至少要选一个。

Answer 1

您可以使用 filter(),

var selects = $("select");
var selected = selects.filter(function(){ return this.value !== "0" });
var res = selects.length - selected.length
if(res == selects.length - 1 || res == 0){
  console.log('The user made a selection');
} else {
  console.log('One or all options must be selected!');
}

DEMO

Answer 2

这应该适合你：

function checkEmpty(){
  var checked = 0;
  $('select').each(function(){
    if($(this).val()!=="0")
    checked++;
  });
  if(checked===3||checked===1){
    //your code
  }
}

jQuery 每页验证多个 select 选项

jQuery validate multiple select options per page

jquery

select

option

DEMO