How can I store the list of option values from a select box into a variable, delimited by ma?
ie:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<select id="fruits">
<option value="orange">orange</option>
<option value="banana">banana</option>
<option value="kiwi">kiwi</option>
<option value="mango">mango</option>
<option value="pear">pear</option>
<option value="strawberry">strawberry</option>
</select>
</body>
</html>
The var would be the following:
var x = "orange,banana,kiwi,mango,pear,strawberry"
How can I store the list of option values from a select box into a variable, delimited by ma?
ie:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<select id="fruits">
<option value="orange">orange</option>
<option value="banana">banana</option>
<option value="kiwi">kiwi</option>
<option value="mango">mango</option>
<option value="pear">pear</option>
<option value="strawberry">strawberry</option>
</select>
</body>
</html>
The var would be the following:
var x = "orange,banana,kiwi,mango,pear,strawberry"
- 1 Do you know what a "for loop" is? – epascarello Commented Sep 19, 2013 at 14:10
5 Answers
Reset to default 8I'd suggest, at its simplest:
var select = document.getElementById('fruits'),
opts = select.getElementsByTagName('option'),
x = [];
for (var i = 0, len = opts.length; i < len; i++) {
x.push(opts[i].value);
}
x = x.join();
JS Fiddle demo.
<select>s have a property called options. You can iterate it like a regular array. You can then add their values to another, simple array and use join to make a ma seperated list out of it.
// Get the select
var select = document.getElementById("fruits");
// This array will hold the values only
var values = [];
// Iterate the options
for (var i = 0; i < select.options.length; i++) {
// Store the value inside our array
values.push(select.options[i].value;
}
// Make a ma seperated list
var x = values.join(",");
Try:
var x = document.getElementById('fruits').options;
var values = [];
for(var i=0;i<x.length;i++){
values.push(x[i].value);
}
var val = values.join(",");
DEMO FIDDLE
Using getElementsByTagName('option') and a for loop are your friends here.
JSFIddle Demo
var options = document.getElementsByTagName('option');
var x = new Array();
for(var i = 0; i < options.length; i++) {
x.push(options[i].value);
}
x = x.join(', ');
try this
<select>
<script language="text/javascript">
var x = new Array("orange,banana,kiwi,mango,pear,strawberry");
for(var i=0; i<x.length; i++)
{
document.write("<option value=\""+states[i]+"\">"+states[i]+"</option>");
}
</script>
</select>