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

时间:2014-02-17 01:55:17

标签: javascript jquery

这是发生了什么。我有一个select元素,无论是否选中它,我都需要为其提供逗号分隔的所有选项字符串。

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

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

并将其转换为:

    "Nature, Cats, Space"

我试图找到做到这一点的方法,但是......我还在学习javascript,而我的有限知识让我陷入困境。

任何帮助都会受到赞赏,即使这只是为了引导我朝着正确的方向前进。 谢谢你的时间。

5 个答案:

答案 0 :(得分:14)

使用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以及您可以使用的方法和属性,例如querySelectorAllchildrentextContent等。

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

答案 1 :(得分:1)

一个简单的解决方案是:

// 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 :)

答案 2 :(得分:1)

普通的旧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(','));

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

答案 3 :(得分:1)

如何:

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

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

http://jsfiddle.net/wN2Dk/

答案 4 :(得分:1)

这是一个简单的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();)