Idiomatic jQuery to get all options in a list to a comma-separated string?

Question

Where lb is the list, txtfield is the text field, this code takes all the parameter values, puts them in an array and turns it into a comma-separated list:

var arr = []; for (var i = 0; i < lb.length; i++) { arr[i] = lb.options[i].value; } txtfield.value = arr.join(','); 

lb.options.toString () obviously does not work because it is an array of parameters (value and text). I have not found anything more than succin than this.

What is the jQuery way to do this? I tried to combine with $(lb).each() but cannot make it work in the same way.

Answer 1

 txtfield.value = $(lb.options).map(function() { return this.value; }).get().join(','); 

This one uses .map() to create a jQuery object, returning the value each option , then uses .get() to retrieve the array from the object.

---

EDIT: As @Nick Craver noted in the comment below, if you need to get optimal performance (with jQuery), it makes more sense to use the $.map() option since you already have the collection. See his answer for more details .

---

EDIT: For best performance, do a for loop, but cache property references. It matters .

 var arr = [], opts = lb.options, len = opts.length; for (var i = 0; i < len; i++) { arr[i] = opts[i].value; } txtfield.value = arr.join(','); 

Answer 2

JQuery .map() version:

 var arr = $(lb).find("option").map(function() { return this.value; }).get(); txtfield.value = arr.join(','); 

Or a little faster with $.map() as follows:

 var arr = $.map(lb.options, function(o) { return o.value; }); txtfield.value = arr.join(','); 

However, both options are significantly less efficient than the for loop; go to the simple version of JavaScript that you already have.

Answer 3

Take a look at map() ..

 $('#lbID option').map(function() { return $(this).val(); }).get().join(','); 

Answer 4

This is the equivalent of jQuery for your code. However, there are more elegant solutions.

 var values = []; $(lb).children('option').each(function () { values.push($(this).text()); }); $(txtfield).val(values.join(',')); 

Answer 5

Can it do this, but I'm not sure what you are trying to achieve?

 $('option', $(lb)).each(function() { arr.push($(this).text()) }); 

Answer 6

Watch the demo here: Fiddler Demo

You can get several selected options with delimited text values.

  $('#testID').change(function () { var test=$(this).find("option:selected").map(function () { return $(this).text(); }).get().join('//'); alert(test); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <select id="testID" multiple="multiple"> <option value="1">test Value1</option> <option value="2">test Value2</option> <option value="3">test Value3</option> <option value="4">test Value4</option> <option value="5">test Value5</option> <option value="6">test Value6</option> </select> <input type="button" value="Get dropdown selected Value" id="select-values"> <div id="result"></div>