Question

I have a select box.

<select id='x'>
    <option value='1'>'Vineet'</option>
    <option value='2'>'Vivek'</option>
    <option value='3'>'Madhu'</option>
</select>

The options are added dynamically to it. At the end, I want to collect the values of ALL option elements contained within this select box into an array. I searched the forum for the answer, but Q/A are there for getting the ‘selected’ option only.

I tried this:

var myList = [];
$('#x').each(function() { myList.push( $(this).value() ) });

In firebug, It gives this error:

missing } after property list

But I fail to see any missing }. What am I doing wrong here?

Answer 1

You need to loop through each option element within the select, not just the select itself, also, the correct method to get the value of an input in jQuery is val(), try this:

myList = [];
$('#x option').each(function() {
  myList.push($(this).val())
});

Example fiddle

You can also use map():

var myList = $('#x option').map(function() {
  return this.value;
}).get();

// A version of the above in ES6 (note: unsupported in IE)
let myList = $('#x option').map((i, el) => el.value).get();

In all the above cases the myList variable will contain an array of strings.