jquery - 使用 jQuery 循环遍历每个选择字段

Question

如何使用 $(.promote).each(function(){}); 获取用户在每个选择字段上选择的值 html代码是:

<div class="class1">
<select class=" promote">
  <option value="Promote">Promote</option>
  <option value="DoNotPromote" selected="selected">Do not Promote</option>
</select>
</div>
<div class="class2">
<select class=" promote">
  <option value="Promote">Promote</option>
  <option value="DoNotPromote" selected="selected">Do not Promote</option>
</select>
</div>;
<div class="class3">
<select class=" promote">
  <option value="Promote">Promote</option>
  <option value="DoNotPromote" selected="selected">Do not Promote</option>
</select>
</div>;
<div class="class4">
<select class=" promote">
  <option value="Promote">Promote</option>
  <option value="DoNotPromote" selected="selected">Do not Promote</option>
</select>
</div>;

Answer 1

您可以使用一个按钮，然后单击即可使用 .map() 获取每个选择的值

$("#getValues").on("click", function() {
  var values = $(".promote").map(function() {
    return $(this).val();
  }).get();
  alert(values);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="class1">
  <select class=" promote">
    <option value="Promote">Promote</option>
    <option value="DoNotPromote" selected="selected">Do not Promote</option>
  </select>
</div>
<div class="class2">
  <select class=" promote">
    <option value="Promote">Promote</option>
    <option value="DoNotPromote" selected="selected">Do not Promote</option>
  </select>
</div>
<div class="class3">
  <select class=" promote">
    <option value="Promote">Promote</option>
    <option value="DoNotPromote" selected="selected">Do not Promote</option>
  </select>
</div>
<div class="class4">
  <select class=" promote">
    <option value="Promote">Promote</option>
    <option value="DoNotPromote" selected="selected">Do not Promote</option>
  </select>
</div>
<input type="button" value="Get All Values" id="getValues" />

您可以使用.each()也是:

$("#getValues").on("click", function () {
    var values = [];
    $(".promote").each(function (i) {
       values[i] = $(this).val();
    });
    alert(values);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="class1">
    <select class=" promote">
        <option value="Promote">Promote</option>
        <option value="DoNotPromote" selected="selected">Do not Promote</option>
    </select>
</div>
<div class="class2">
    <select class=" promote">
        <option value="Promote">Promote</option>
        <option value="DoNotPromote" selected="selected">Do not Promote</option>
    </select>
</div>
<div class="class3">
    <select class=" promote">
        <option value="Promote">Promote</option>
        <option value="DoNotPromote" selected="selected">Do not Promote</option>
    </select>
</div>
<div class="class4">
    <select class=" promote">
        <option value="Promote">Promote</option>
        <option value="DoNotPromote" selected="selected">Do not Promote</option>
    </select>
</div>
<input type="button" value="Get All Values" id="getValues" />

The each method is meant to be an immutable iterator, where as the map method can be used as an iterator, but is really meant to manipulate the supplied array and return a new array.

Another important thing to note is that the each function returns the original array while the map function returns a new array. If you overuse the return value of the map function you can potentially waste a lot of memory.

source