检查所选选项是否没有值，跨多个选择字段

Question

当我尝试以下 jQuery 时，出现错误：

意外类型错误（：$selReqs[i].val 不是函数）

我已经尝试了以下的多种变体，但似乎无法检查所选选项是否对每个选择字段都没有值。 任何建议表示赞赏！

 var $selReqs = $('.allMinReqs'); var reqs = []; for(var i=0; i < $selReqs.length; i++) { if(!$selReqs[i].val()) { reqs.push($selReqs[i]); } }

 <div id="minReqs"> <div class="hide" id="singleMin_mcReq"><br> <label for="singleMin">Minimum requirement for each skill: <span class="required">*</span> </label> <select class="allMinReqs" id="singleMin" onchange="showMcStart();"> <option value="">Please Select</option> <option value="5">5.0</option> <option value="5.5">5.5</option> <option value="6">6.0</option> <option value="6.5">6.5</option> <option value="7">7.0</option> <option value="7.5">7.5</option> </select> </div> <div class="hide" id="multiMin_mcReq"><br> <label for="curL">Listening requirement: <span class="required">*</span> </label> <select class="allMinReqs" id="mcReq_L"> <option value="">Please Select</option> <option value="4">4.0</option> <option value="4.5">4.5</option> <option value="5">5.0</option> <option value="5.5">5.5</option> <option value="6">6.0</option> <option value="6.5">6.5</option> <option value="7">7.0</option> <option value="7.5">7.5</option> <option value="8">8.0</option> <option value="8.5">8.5</option> <option value="9">9.0</option> <option value="9.5">9.5</option> </select> <label for="curR">Reading requirement: <span class="required">*</span> </label> <select class="allMinReqs" id="mcReq_R"> <option value="">Please Select</option> <option value="4">4.0</option> <option value="4.5">4.5</option> <option value="5">5.0</option> <option value="5.5">5.5</option> <option value="6">6.0</option> <option value="6.5">6.5</option> <option value="7">7.0</option> <option value="7.5">7.5</option> <option value="8">8.0</option> <option value="8.5">8.5</option> <option value="9">9.0</option> <option value="9.5">9.5</option> </select>

Answer 1

您代码中的问题是因为您正在按索引访问 jQuery 对象。 这将返回没有val()方法的底层 DOM 元素对象。

为了实现您的目标，您可以使用map()创建所有选定值的数组。 然后您可以检查该数组的长度以确定是否选择了任何内容，如下所示：

 $('button').on('click', function() { var values = $('.allMinReqs').map((i, e) => e.value !== '' ? e.value : null).get(); console.log(values); var somethingSelected = values.length != 0; console.log(somethingSelected); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button>Check</button> <div id="minReqs"> <div class="hide" id="singleMin_mcReq"><br> <label for="singleMin">Minimum requirement for each skill: <span class="required">*</span> </label> <select class="allMinReqs" id="singleMin"> <option value="">Please Select</option> <option value="5">5.0</option> <option value="5.5">5.5</option> <option value="6">6.0</option> <option value="6.5">6.5</option> <option value="7">7.0</option> <option value="7.5">7.5</option> </select> </div> <div class="hide" id="multiMin_mcReq"><br> <label for="curL">Listening requirement: <span class="required">*</span> </label> <select class="allMinReqs" id="mcReq_L"> <option value="">Please Select</option> <option value="4">4.0</option> <option value="4.5">4.5</option> <option value="5">5.0</option> <option value="5.5">5.5</option> <option value="6">6.0</option> <option value="6.5">6.5</option> <option value="7">7.0</option> <option value="7.5">7.5</option> <option value="8">8.0</option> <option value="8.5">8.5</option> <option value="9">9.0</option> <option value="9.5">9.5</option> </select> <label for="curR">Reading requirement: <span class="required">*</span> </label> <select class="allMinReqs" id="mcReq_R"> <option value="">Please Select</option> <option value="4">4.0</option> <option value="4.5">4.5</option> <option value="5">5.0</option> <option value="5.5">5.5</option> <option value="6">6.0</option> <option value="6.5">6.5</option> <option value="7">7.0</option> <option value="7.5">7.5</option> <option value="8">8.0</option> <option value="8.5">8.5</option> <option value="9">9.0</option> <option value="9.5">9.5</option> </select>