Question

I have something like this:

<select class="bla">
  <option value="1">...</option>
  <option value="2">...</option>
</select>

<select class="bla">
  <option value="1">...</option>
  <option value="2">...</option>
</select>

<select class="bla">
  <option value="1">...</option>
  <option value="2">...</option>
</select>

<input class="alloptions" type="hidden" value="">

I want the hidden input field value to change every time a different option is selected in each of the select input fields above.
This value would contain the selected options from all input fields separated with commas.

How can I do this?

Answer 1

Something like:

$('select.bla').change(function() {
    $value = $('select.bla').map(function(){return $(this).val()}).get().join(',');
    $('input.alloptions').val($value);
});

Explanation:

• change() gets fired whenever the value of a select field changes
• With map() we create an array of the values of the select fields and join them to a string separated by commas