javascript - 从 jQuery 中的 select 元素生成逗号分隔的字符串

Question

这是正在发生的事情。我有一个 select 元素，无论它是否被选中，我都需要为它获取所有选项的逗号分隔字符串。

我怎样才能在 jQuery/javascript 中使用这个:

    <select id="currentTags" multiple>
        <option>Nature</option>
        <option>Cats</option>
        <option>Space</option>
    </select>

然后把它变成这样:

    "Nature, Cats, Space"

我试图找到这样做的方法，但无法...我仍在学习 javascript，我有限的知识使我无法继续前进。

任何帮助将不胜感激，即使它只是引导我朝着正确的方向前进。感谢您的宝贵时间。

Answer 1

使用 jQuery:

var result = $('#currentTags option').map(function(i, opt) {
  return $(opt).text();
}).toArray().join(', ');

在普通的 JavaScript 中，你可以做类似这样的事情:

// Convert pseudo-arrays to real arrays
var __slice = Array.prototype.slice;

// Get select options as real array
var opts = __slice.call(document.querySelectorAll('#currentTags option'));

// Map the text of each option
var result = opts.map(function(x) {
  return x.textContent;
}).join(', ');

console.log(result); //=> "Nature, Cats, Space"

将元素抽象为集合而不是循环的优点是您可以维护一致的 API(如 jQuery)，并且您不需要创建额外的变量来循环伪数组，因为真正的数组可以使用所有数组方法。

参见 MDN了解有关 DOM 以及您可以使用的方法和属性的更多信息，例如 querySelectorAll、children、textContent 等。

编辑:这应该适用于 IE9+ 和所有现代浏览器。