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!

Are you sure? When I run your snippet, I get a two-item array. — Declan McKelvey-Hembree
– Declan McKelvey-Hembree, Commented Dec 3, 2019 at 19:01
Sorry, the above snippet in fact does return an array, however, returns the value 'option' for each element in the array, for me - I'm wanting to access the actual values selected by the user — jwaterson
– jwaterson, Commented Dec 3, 2019 at 21:28

Ori Drori · Accepted Answer · 2019-12-03 19:02:01Z

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>

answered Dec 3, 2019 at 19:02

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jwaterson Over a year ago

That's great, but could it be amended to specify options contained only within a certain class? (I have other drop-downs elsewhere in HTML doc)

Ori Drori Over a year ago

Just change the selector in var $select = $('select'); to whatever you need. For example var $select = $('.whatever select'); - all select elements under class .whatever.

Collectives™ on Stack Overflow

Create array from all selected options of particular class

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related