I want to save all my options as a javaScript Array
Html
<select id="mySelect">
<option value="0"> option 2 </option>
<option value="0"> option 3 </option>
<option value="0"> option 4 </option>
<option value="0"> option 5 </option>
</select>
Js
$select = $("#mySelect");
$options = $select.find("option");
for(var i = 0; i < $options.length; i++ ) {
alert($options[i].val());
}
alert($options[i].val()); won't work , I got $options[i].val() is not a function
If you're using jQuery:
var arr = $('#mySelect option').map(function(){
return this.value;
}).get();
The reason that options[i].val() failed is that options[i] is a native DOM node, not a jQuery object.
If you'd like to do the same with plain JavaScript:
var opts = document.getElementById('mySelect').getElementsByTagName('option'),
arr = [];
for (var i = 0, len = opts.length; i < len; i++) {
arr.push(opts[i].value);
}
Or, for more up-to-date browsers:
var opts = document.querySelectorAll('#mySelect option'),
arr = [];
for (var i = 0, len = opts.length; i < len; i++) {
arr.push(opts[i].value);
}
And in slightly more modern browsers:
var arr = [].map.call(document.querySelectorAll('#mySelect option'), function(a){
return a.value;
});
console.log(arr);
Also, if you'd like to take both the value and the text-content from the options (as a simple demo, using the second code-sample from above as the basis):
var opts = document.getElementById('mySelect').getElementsByTagName('option'),
arr = [], tmp;
for (var i = 0, len = opts.length; i < len; i++) {
tmp = opts[i];
arr.push({'value' : tmp.value, 'content' : (tmp.textContent || tmp.innerText)})
}
console.log(arr);
References:
Thats because when you do $options[i] you don't get a jquery object, you get an element. use value:
$select = $("#mySelect");
$options = $select.find("option");
for(var i = 0; i < $options.length; i++ ) {
alert($options[i].value);
}
If you want a jquery object, you can use .eq() instead... like this:
$select = $("#mySelect");
$options = $select.find("option");
for(var i = 0; i < $options.length; i++ ) {
alert($options.eq(i).val());
}
Either way will work fine, although the second will create a jquery object which is not necessary in this case.
http://jsfiddle.net/pnkpF/
http://jsfiddle.net/pnkpF/1/
.eq over $($options[i]) (which someone else had in their answer)val is not the correct attribute for the option tag. Use value instead:
<select id="mySelect">
<option value="0"> option 2 </option>
<option value="0"> option 3 </option>
<option value="0"> option 4 </option>
<option value="0"> option 5 </option>
</select>
Also, if you select [i] from a jQuery array, you get the raw HTML element. Wrap it in jQuery again to have access to functions like .val():
$select = $("#mySelect");
$options = $select.find("option");
for(var i = 0; i < $options.length; i++ ) {
alert($($options[i]).val());
}
Option 1: Array
var options = [];
$("#mySelect option").each(function() {
options.push($(this).val());
});
options will look like this:
['0', '0', '0', '0']
Option 2: Object
If you want to save the text within the <option> (e.g. option 2 or option 3) then you should probably store this in a Javascript object rather than an array. Take a look at this:
var options = {};
$("#mySelect option").each(function() {
options[$(this).html()] = $(this).val();
});
options will look like this:
{
' option 2 ': '0',
' option 3 ': '0',
' option 4 ': '0',
' option 5 ': '0'
}
$select.options[i].val()