Create array from all selected options of particular class

Question

very new to this - I'm trying to make an array with all selected options from multiple drop downs. Have tried a little jQuery however only getting an array with the first selected option. When I try the below line in console it only returns selected 'Listening' score (HTML below):

var scoreArr = $.makeArray($('.curScore :selected'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="curLang">
	<h3>Enter your four-skills language test scores:</h3>
	<label for="Listening">Listening: <span class="required">*</span> </label>
	<select class="curScore" id="Listening" name="Listening">
    <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="Reading">Reading: <span class="required">*</span> </label>
	<select class="curScore" id="Reading" name="Reading">
    <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>

Any help is appreciated!

Answer 1

Use jQuery's .map() to get the values and then use .get() to convert an array:

var $select = $('select');

var scoreArr = $select.map(function() {
    return $(this).val();
  })
  .get();
  
console.log(scoreArr);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="curLang">
  <h3>Enter your four-skills language test scores:</h3>
  <label for="Listening">Listening: <span class="required">*</span> </label>
  <select class="curScore" id="Listening" name="Listening">
    <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="Reading">Reading: <span class="required">*</span> </label>
  <select class="curScore" id="Reading" name="Reading">
    <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>