jquery 从 JSON 数组中的选择框中收集所有选项值

Question

我有一个选择框。

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

选项是动态添加的。最后，我想将此选择框中包含的所有选项元素的值收集到一个数组中。我在论坛中搜索了答案，但 Q/A 仅用于获取“已选择”选项。

我试过了：

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

在萤火虫中，它给出了这个错误：

属性列表后缺少 }

但我没有看到任何丢失的}。我在这里做错了什么？

Answer 1

你需要遍历 select 中的每个 option 元素，而不仅仅是 select 本身，在 jQuery 中获取输入值的正确方法是 val()，试试这个：

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

Example 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 变量将包含一个字符串数组。

Answer 2

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

附带说明，您的选择器不符合您的要求。 $('#x') 将返回具有x 的id 的所有元素 - 这应该只是一个元素 - 然后.each() 将遍历该组元素（因此它将调用该函数一次）。您最终会得到一个包含单个值的数组，该值将是 <select> 输入的当前选定值。

改为使用$('#x > option')，它将返回所有<option>元素，这些元素是<select>元素与id的x的直接子元素。