jquery之检查是否在 select 中选择了必填字段 "row"

我在表单中有多个选择，我需要使用 jQuery 检查是否至少选择了所有必填字段 (required="true")。

类似这样的事情:

<select class="check" name="first"> 
    <option value="some" required="true">Some required</option> 
    <option value="other">Other Value</option> 
    <option value="few" required="true">Few required</option> 
</select> 
<select class="check" name="second"> 
    <option value="some" required="true">Some required</option> 
    <option value="other">Other Value</option> 
    <option value="few" required="true">Few required</option> 
</select> 
<select class="check" name="third"> 
    <option value="some" required="true">Some required</option> 
    <option value="other">Other Value</option> 
    <option value="few" required="true">Few required</option> 
</select> 
<select name="other"> 
    <option value="some" required="true">Some required</option> 
    <option value="other">Other Value</option> 
    <option value="few" required="true">Few required</option> 
</select> 

我需要检查其类包含 .check 的所有选择元素，并确保分配所有必填字段。

我正在考虑按如下方式进行。

1. 创建一个包含所有必需值的数组:

   var requiredFields = []; 
   $('option:selected', this).attr('required').each(function(){ 
       requiredFields.push($(this).val()); 
   }) 
   

2. 创建所有选定值的数组:

   var valuesSelected = []; 
   $('.check').each(function(){ 
       valuesSelected.push($(this).val()); 
   }) 
   

3. 检查必填字段是否在所选值数组中，如果没有，请执行某些操作:

   for(i=0;i<requiredFields;i++){ 
       if(jQuery.inArray(requiredFields[i], valuesSelected)==-1){ 
            var error += 'Please select '+requiredFields[i]; 
       } 
   } 
   

4. 显示错误消息，或者如果为空则执行某些操作:

   if(error!=''){ 
       alert(error); // just for testing 
   } else { 
        // have fun 
   } 
   

我提出了一个简单的 jsFiddle测试一下，但看来我一定做错了什么，有什么帮助吗？

请您参考如下方法:

这是一种使用 map 来做到这一点的方法 http://jsfiddle.net/4vNcU/4/

$(document).on('click', '.check-select', function () { 
var error = $(".check").find("option:selected").map(collectErrors); 
for (var i = 0; i < error.length; i++) { 
    alert(error[i]); 
} 
}); 
 
function collectErrors() { 
    if ($(this).attr("required") == undefined) { 
       var $parent = $(this).parent(); 
       return "Please select one of the folowing:" +  
       findRequired($parent) +  
       " For the select box " + $parent.attr("name"); 
    } 
} 
 
function findRequired($parent) { 
    return $parent.find("option[required=true]").map(function () { 
        return $(this).text(); 
    }).toArray().join() 
}