Question

我需要将所有选定的选项保存在数组中以便以后输出。我发现了很多建议，但它仍然不适合我。类名和名称不能更改。

HTML

Enter, String: Hello World

JS

 World

输出

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

Answer 1

您可以使用$('.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>

{{1}}

Answer 2

此代码段演示了.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>

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

2 个答案: