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 +和所有现代浏览器。

Answer 2

一个简单的解决方案是：

// Initialize your string
var output_string = "";

// For each 'option' tag, append its value to the string with the comma
$('#currentTags option').each(function() {
    output_string = output_string+this.text;
});

// Removing the last ', ' which were added during the loop
output_string = output_string.substr(0, output_string.length-2);

Here's a Fiddle to see it into action :)

Answer 3

普通的旧javascript（POJS）方法是获取select的选项集合，然后循环它以获取值并生成具有所需格式的字符串，例如

var options = document.getElementById('currentTags').options;
var values = [];

for (var i=0, iLen=options.length; i<iLen; i++) {
  values.push(options[i].text);
}

alert(values.join(','));

您可以用更简洁的形式编写它，但性能可能会受到影响，并且取决于所使用的功能，在某些浏览器中可能会失败。上述内容非常重视代码的清晰度和可维护性，性能至少与任何替代方案一样快。

Answer 4

如何：

var tags = [];
$('#currentTags option').each(function() {
    tags.push($(this).val());
});

console.log(tags.join(', ')); // 'Nature, Cats, Space'

http://jsfiddle.net/wN2Dk/

Answer 5

这是一个简单的jQuery示例：

var arr = []; // create array

$('#currentTags').children().each(function() {
    arr.push($(this).text()); // add option text to array
});

alert(arr.join(', ')); // Nature, Cats, Space

如果您需要选项value，请将text()切换为val();）

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

5 个答案: