jQuery验证每页的多个选择选项

时间:2016-03-20 17:52:16

标签: jquery select option

我在页面表单上有很多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');
    }

}

用户需要选择其中一个选择框或全部选择框。至少必须选择一个。

2 个答案:

答案 0 :(得分:2)

您可以使用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

答案 1 :(得分:0)

这应该适合你:

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