From what I understand a option elements that popuate select elements in HTML are an array.
So basically what i want to do is return an array string that is separated by commas.
Tried to do selecbox.options.join(',');, but got an error that its not supported; anyone have an idea why?
It is not an array. It is an HTMLCollection. It is "array-like"
In 2022, a week before EOL of Internet Explorer 11, the simplest vanilla JavaScript solution is using spread and Array map
const opts = document.querySelectorAll(select option);
// we can use forEach on the resulting HTMLCollection
// but map needs to be spread to array
const vals = [...opts]
.map(el => el.value);
console.log(vals);<select>
<option value=Please select>Text 0</option>
<option value=one>Text 1</option>
<option value=two>Text 2</option>
<option value=three>Text 3</option>
</select><br/>
The above select has the following option values:<br/>
<span id=result></span>Older answer that is compatible with IE11
from http://api.jquery.com/jQuery.each/ which CAN iterate over either:
Iterate over both objects and arrays.
Arrays and array-like objects with a
length property (such as a function's
arguments object) are iterated by
numeric index, from 0 to length-1.
Other objects are iterated via their
named properties.
Each HTML Option element has a value and a text and some more attributes.
A simple for loop can be used
vals = []
var sel = document.querySelector("select");
for (var i=0, n=sel.options.length;i<n;i++) { // looping over the options
if (sel.options[i].value) vals.push(sel.options[i].value);
}
the Array.apply posted by typeracer will return an array of HTMLOptionElements which still needs to be looped over or mapped to get at the values and texts
Here are a few versions that will return the same.
This fiddle will run in IE11 too
var vals, sel = document.querySelector(select), show=function(vals) {$(#result).append([ + vals.join(][) + ]<hr/>);}
var supportsES6 = function() {try{new Function((a = 0) => a);return true;}catch (err) {return false; }}();
// jQuery mapping jQuery objects - note the this and the .get()
vals = $('select > option').map(function() {return this.value;}).get();
show(vals);
// plain JS using loop over select options
vals = [];
for (var i = 0, n = sel.options.length; i < n; i++) { // looping over the options
if (sel.options[i].value) vals.push(sel.options[i].value); // a bit of testing never hurts
}
show(vals);
// Plain JS using map of HTMLOptionElements - note the el
vals = Array.apply(null, sel.options).map(function(el) { return el.value; });
show(vals);
// ES6 JS using spread and map of HTMLOptionElements - note the fat arrow and el
if (supportsES6)
document.write(`<script>
vals = [...sel.options].map(el => el.value);
show(vals);
</script>`
);<script src=https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js></script>
<select>
<option value=Please select>Text 0</option>
<option value=one>Text 1</option>
<option value=two>Text 2</option>
<option value=three>Text 3</option>
</select><br/>
The above select has the following option values:<br/>
<span id=result></span>
