CODEWITHSUNDEEP
javascriptjqueryarrays
jwaterson
jwaterson

Reputation: 45

Check whether selected option has no value, across multiple select fields

When I try the below jQuery, I get an error:

Unexpected Type Error (: $selReqs[i].val is not a function)

I have tried multiple variations of the below and cannot seem to get it to check if selected option has no value for each of the select fields. Any advice appreciated!

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>

Upvotes: 2

Views: 140

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337714

The issue in your code is because you're accessing a jQuery object by index. This returns the underlying DOM Element object which has no val() method.

To achieve your goal you could use map() to create an array of all the selected values. Then you can check the length of that array to determine if anything was selected, like this:

$('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>

Upvotes: 2

Related Questions