jQuery将选择框中的所有选项值收集到JSON数组中

Question

我有一个下拉框。

<select id='x'>
    <option value='1'>'Vineet'</option>
    <option value='2'>'Vivek'</option>
    <option value='3'>'Madhu'</option>
</select>

Option 1 Option 2 Option 3

选项是动态添加到其中的。最后，我想将此选择框中包含的所有选项元素的值收集到数组中。我在论坛上搜索答案，但只有关于获取“选中”选项的问题和答案。

我尝试了这个：

var myList = [];
$('#x').each(function() { myList.push( $(this).value() ) });

在Firebug中，它会给出以下错误提示：

missing } after property list

但我没有看到任何缺少的 }。我在哪里做错了？

- Vineet

---

在每个值后面加上逗号吗？ - mas-designs

在任何<option>的值中都没有逗号。 - Vineet

$(this).val() 而不是 $(this).value() - Rajkamal Subramanian

如果我需要获取每个<option>的类，会像这样工作吗？-- "$('#x option').class()" - Vineet

如果一个元素有多个类别，该怎么办？例如 class="myBold myLargeFont myGreen" - 可以查看 jQuery 的 attr：http://api.jquery.com/attr/ - 还可以查看 hasClass。 - Harag

Answer 1

你需要循环遍历选择器内的每个元素，而不仅仅是选择器本身。另外，使用jQuery获取输入值的正确方法是val()，请尝试以下代码：

myList = [];
$('#x option').each(function() {
  myList.push($(this).val())
});

例子 fiddle

你也可以使用 map()：

var myList = $('#x option').map(function() {
  return this.value;
}).get();

// A version of the above in ES6 (note: unsupported in IE)
let myList = $('#x option').map((i, el) => el.value).get();

在上述所有情况中，myList 变量将包含一个字符串数组。

- Rory McCrossan

---

你收到了什么错误？你确定你尝试了完全相同的解决方案吗？正如你从fiddle中看到的，它确实可以工作。 - Rory McCrossan

糟糕，我的错。我只提供了（'#x'）而不是（'#x option'）。现在它可以工作了。谢谢Rory。 - Vineet

Answer 2

尝试使用jQuery函数获取元素（包装在jQuery对象中）的值是.val()，而不是.value() - 这可能会导致一些混淆，虽然我不能确定。

顺便说一句，您想要的选择器不正确。$('#x')将返回所有具有id为x的元素 - 这应该只有一个元素 - 然后.each()将迭代该元素集（因此它将调用该函数一次）。您最终只会得到一个包含单个值的数组，该值将是<select>输入当前选定的值。

相反，请使用$('#x > option')，它将返回所有是<select>元素的直接子元素的<option>元素，并且该元素具有id为x。

- Anthony Grist

---

在你提出的更正意见后，它成功了。谢谢你，安东尼。 - Vineet

亲爱的安东尼，你和罗尼给出的答案是一样的（这并不奇怪）。在接受答案时，由于只能接受一个答案，我选择了第一个。但同样的功劳归于你。谢谢。 - Vineet

如果我想获取每个<option>的类，扩展一下，这样做可以吗？-- "$('#x option').class()" - Vineet