Question

Have a potentially infinite collection of drop downs, giving them all the same class, need to be able to access, loop through, and collect the selected value on the option of all the drop downs regardless of how many there could be. The final form should be something like 5,6,7,6,4,2,3,4,3,4 as a comma delimited list of the selected values from all drop downs.

Answer 1

var ids = $("select.classname > option:selected").map(function(n, i) {
  return $(n).val();
}).join(",");

To explain what that’s doing:

1. Firstly it selects all the selected options within the given drop downs (identified by “classname”);
2. It passes every selected option to a callback function;
3. That callback function returns the value of the selected option;
4. Because you called map on the array of selected options, you’ve now got an array of values using the map() method;
5. The join() function transforms that array into a comma delimited list.

For example:

<select class="classname">
  <option value="1">One</option>
  <option value="2" selected>Two</option>
  <option value="3" selected>Three</option>
</select>
<select class="classname">
  <option value="4">Four</option>
  <option value="5" selected>Five</option>
</select>

first uses $() to construct a jQuery object of the selected options (2, 3 and 5), maps the value attributes into an array of {2,3,5} and then joins them into a comma-delimited string "2,3,5".