Generating a comma delimited string, from select element in jQuery

Question

Here's what's going on. I have a select element, for which I need to get a comma delimited string of all its options, regardless of whether or not it's selected.

How can I, in jQuery/javascript take this:

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

and turn it into this:

    "Nature, Cats, Space"

I tried to find ways of doing this and couldn't... I'm still learning javascript, and my limited knowledge is stopping me in my tracks.

Any help would be appreciated, even if it's just to guide me in the right direction. Thank you for your time.

Answer 1

With jQuery:

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

In plain JavaScript you can do something similar like this:

// 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"

The advantage of abstracting elements into collections instead of looping is that you maintain a consistent API (like jQuery), and you don't need to create extra variables to loop pseudo-arrays, as real arrays can use all array methods.

See the MDN to learn more about the DOM and the methods and properties you can use, like querySelectorAll, children, textContent and more.

Edit: This should work in IE9+ and all modern browsers.

Answer 2

The plain old javascript (POJS) way is to get the select's options collection, then loop over it to get the values and generate a string with the required format, e.g.

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(','));

You can write that in much more concise form but performance may suffer and depending on features used, may fail in some browsers. The above puts a premium on clarity and maintainability of code, performance will be at least as fast as any alternative.

Answer 3

How about just:

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

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

http://jsfiddle.net/wN2Dk/

Answer 4

Here is a simple jQuery example:

var arr = []; // create array

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

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

If you want the option value, switch text() to val() ;)

Answer 5

A simple solution would be:

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