loop through each select field using jQuery

Question

how can get the value selected by the user on each select field using $(.promote).each(function(){}); the html code is:

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

score 4 · Answer 1 · edited May 23 '17 at 12:11

You can use a button and on click you get the values of each select using .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" />

You can use .each() too:

$("#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

score 0 · Answer 2 · answered Oct 23 '14 at 17:11

0

$('.promte').each(function(){
  // this.value;
  // OR
  // $(this).val();
})

answered Oct 23 '14 at 17:11

Lee Wise

902
7
16

Xogle · Answer 3 · 2014-10-23T17:16:32.687

0

var count = 0;
var array = [];

$('.promote').each(function(){
    array[count] = $(this).val();
    count++;
});

edited Oct 23 '14 at 17:16

answered Oct 23 '14 at 17:11

Xogle

363
3
16

score 0 · Answer 4 · answered Oct 23 '14 at 17:13

0

$(".promote").each(function() {
    var $selectBox = $(this);
    var selectedOption = $selectBox.find(":selected").val();
});

JSFiddle: http://jsfiddle.net/acuocgt5/

answered Oct 23 '14 at 17:13

thiag0

2,199
5
31
51

score 0 · Answer 5 · answered Oct 23 '14 at 17:22

0

instead of each method, you can directly get the values as an array

var selValues = $('.promote').map(function(){return $(this).val()}).get()

Fiddle http://jsfiddle.net/xcsdLapc/1/

answered Oct 23 '14 at 17:22

Manivannan

3,074
3
21
32

loop through each select field using jQuery

5 Answers5