存储选择框的选项值并将其存储到变量中(通过逗号分隔的值)

Storing the option values of a select box and storing them into a variable (by comma separated values)

本文关键字:存储 分隔 选择 选项 变量      更新时间:2023-09-26
如何将

选择框中的选项值列表存储到以逗号分隔的变量中?

即:

<!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>

变量如下:

var x = "orange,banana,kiwi,mango,pear,strawberry"

我建议,最简单的:

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小提琴演示。

<select>有一个名为options的属性。您可以像常规数组一样迭代它。然后,您可以将它们的值添加到另一个简单的数组中,并使用join从中创建一个逗号分隔的列表。

// 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 comma seperated list
var x = values.join(",");

尝试:

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(",");

演示小提琴

> 使用 getElementsByTagName('option')for 循环是你的朋友。

JSFIddle 演示

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(', ');

试试这个

<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>