使用JavaScript从<option>获取值

Question

有人知道如何使用 JavaScript 获取所有 <option> 的值吗？

例如：

<select name="test" id="test">
  <option value="1">one</option>
  <option value="2">two</option>
  <option value="3">three</option>
</select>

如何使用Javascript检索所有<option>的值并输出：

1
2
3

- Jin Yong

Answer 1

饼图：

var opts = document.getElementById('test').options;
var vals = [];
for(var i = 0, j = opts.length; i < j; i++) 
   vals.push(opts[i].value);

- Jacob Relkin

Answer 2

您可以使用Array.prototype.map来代替显式循环。

var options = document.getElementById('test').options;

var values = Array.prototype.map.call(options, function(val) {
    return val.value;
});

如果您需要支持旧的浏览器，您需要将它添加到Array.prototype中。

您可以使用MDC上的实现：

• https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/map

---

if (!Array.prototype.map)
{
  Array.prototype.map = function(fun /*, thisp */)
  {
    "use strict";

    if (this === void 0 || this === null)
      throw new TypeError();

    var t = Object(this);
    var len = t.length >>> 0;
    if (typeof fun !== "function")
      throw new TypeError();

    var res = new Array(len);
    var thisp = arguments[1];
    for (var i = 0; i < len; i++)
    {
      if (i in t)
        res[i] = fun.call(thisp, t[i], i, t);
    }

    return res;
  };
}

- user113716

---

这充分证明了我对JavaScript的陌生。非常棒的答案。 - Phil

@Phil：谢谢。:o) 当所有很酷的新功能都得到广泛支持时就会很好。 - user113716

Answer 3

var options = document.getElementById('test').options;

请查看https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLOptionsCollection

编辑：为了完整性

var options = document.getElementById('test').options;
var values = [];
for (var i = 0; i < options.length; i++) {
    var option = options.item(i);
    var value = option.value || option.text; // For IE
    values.push(value);
}

据记忆，某些版本的Internet Explorer如果没有设置value属性，则不会返回选项的文本内容。

- Phil

---

这并没有给你任何值... - eyelidlessness

@eyelidlessness 我更像是一个“授人以渔”的人 ;) - Phil

这样做也许可以，但我不认为这是网站的本意。无论如何，当您发布一个没有实际解决问题的答案时，最好解释一下您正在这样做。 - eyelidlessness

@eyelidlessness 你说得对，SO是一个回答问题的网站。这就是为什么我编辑了我的回答。 - Phil

Answer 4

我想获取所有的数值及其标签，所以我使用了以下代码。

var opts = document.getElementById('state_of_birth').options;
var vals = [];
var txt = [];
for(i=0,j=opts.length;i<j;i++) 
{
    vals.push(opts[i].value);
    txt.push(opts[i].text);
}
var k=i;
for(i=0;i<k;i++)
{
    window.alert(vals[i]);
    window.alert(txt[i]);
}

- suhas pandit

Answer 5

我建议使用jQuery库，并使用.each()方法查询在定义的"select"下的所有"options"标签。

- publikz.com

Answer 6

你可以使用JavaScript来实现：

var opt = document.getElementById('idOfYourSelect').options;
for (var i = 0, ii = opt.length; i < ii; i++) {
    console.log(opt[i].value);
}

如果你使用jQuery，可以这样写：

var opt = $('#idOfYourSelect options');
for (var i = 0, ii = opt.length; i < ii; i++) {
    console.log(opt[i].value);
}

- Fatih Acet