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?

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?

• javascript
• jquery
• html
• json

• do you add an ',' after every value ? – mas-designs Commented Feb 13, 2012 at 9:25
• There is no comma in any of the value of <option> – Vineet Commented Feb 13, 2012 at 9:31
• $(this).val() and not $(this).value() – Rajkamal Subramanian Commented Feb 13, 2012 at 9:33
• Further to this, if I have to get the class of every <option>, will something like this work? -- "$('#x option').class()" – Vineet Commented Feb 13, 2012 at 10:03
• What if an element has more than one class assigned? eg class="myBold myLargeFont myGreen" - look at attr for jquery: api.jquery.com/attr - also look at .hasClass – Harag Commented Feb 13, 2012 at 10:10

2 Answers 2

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.

Try jQuery function for getting the value of an element (wrapped in a jQuery object) is .val(), not .value() - that may be causing some confusion, though I can't be sure.

As a side note, your selector is incorrect for what you want. $('#x') will return all of the elements that have an id of x - which should only ever be one element - then the .each() will iterate over that set of elements (so it will call the function once). You'll just end up with an array that contains a single value, which will be the currently selected value of the <select> input.

Instead, use $('#x > option') which will return all <option> elements that are immediate children of the <select> element with the id of x.