JavaScript - Save selected option from multiple select lists with same class name

Question

I need to save all selected options in an array for later output. I found already many suggestions but it is still not working for me. class-names and name can't be changed.

HTML

<select class="addon addon-select" name="addon-9-farbe-0">
<option value="">Wählen Sie eine Option...</option>
<option data-raw-price="" data-price="" value="rot-1">Rot</option>
<option data-raw-price="" data-price="" value="gelb-2">Gelb</option>
<option data-raw-price="" data-price="" value="schwarz-3">Schwarz</option>
</select>

<select class="addon addon-select" name="addon-9-groesse-1">
<option value="">Wählen Sie eine Option...</option>
<option data-raw-price="" data-price="" value="100-1">100</option>
<option data-raw-price="" data-price="" value="200-2">200</option>
<option data-raw-price="" data-price="" value="300-3">300</option>
</select>

JS

$(document).ready(function() {
$('.addon-select').change(function () {
    var result = $(this).val();
    });
});

OUTPUT

<script>
document.getElementById("test").innerHTML = result;
</script>
<div id="test"></div>

Answer 1

You can use map() and to return array of selected options.

$('.addon').change(function() {
  var values = $('.addon').find('option:selected').map(function() {
    return $(this).val()
  }).get()

  console.log(values)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="addon addon-select" name="addon-9-farbe-0">
  <option value="">Wählen Sie eine Option...</option>
  <option data-raw-price="" data-price="" value="rot-1">Rot</option>
  <option data-raw-price="" data-price="" value="gelb-2">Gelb</option>
  <option data-raw-price="" data-price="" value="schwarz-3">Schwarz</option>
</select>

<select class="addon addon-select" name="addon-9-groesse-1">
  <option value="">Wählen Sie eine Option...</option>
  <option data-raw-price="" data-price="" value="100-1">100</option>
  <option data-raw-price="" data-price="" value="200-2">200</option>
  <option data-raw-price="" data-price="" value="300-3">300</option>
</select>