这是发生了什么。我有一个select元素,无论是否选中它,我都需要为其提供逗号分隔的所有选项字符串。
我怎样才能在jQuery / javascript中采用这个:
<select id="currentTags" multiple>
<option>Nature</option>
<option>Cats</option>
<option>Space</option>
</select>
并将其转换为:
"Nature, Cats, Space"
我试图找到做到这一点的方法,但是......我还在学习javascript,而我的有限知识让我陷入困境。
任何帮助都会受到赞赏,即使这只是为了引导我朝着正确的方向前进。 谢谢你的时间。
答案 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以及您可以使用的方法和属性,例如querySelectorAll
,children
,textContent
等。
编辑:这应该适用于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);
答案 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'
答案 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()
;)