JavaScript -从具有相同类名的多个选择列表中保存选定选项

Question

我需要将所有选定的选项保存在数组中，以供以后输出。我已经找到了许多建议，但它仍然对我不起作用。不能更改类名和名称。

<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();
    });
});

输出

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

Answer 1

这个片段演示了.push()数组方法的使用，细节在代码片段中有注释。

片段

​

$(document).ready(function() {

  // Create an empty array to store results
  var selected = [];

  // Delegate the change event on each .addon-select
  $('.addon-select').on('change', function() {

    // Store this .addon-select's value
    var result = $(this).val();

    // .push() the value into the selected array
    selected.push(result);

    $('#test').append('<li>' + result + '</li>');

    // Display the selected array on console
    console.log(selected);

  });

});

select {
  width: 16ch;
  font: inherit;
}

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

<br>
<ol id="test" start='0'></ol>

​

Answer 2

您可以使用map()并返回所选选项的数组。

​

$('.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>

​