CODEWITHSUNDEEP
javascriptjqueryarrays
riksof-zeeshan
riksof-zeeshan

Reputation: 531

jQuery Get value from class attribute of multiple elements in array without loop

I have multiple Select dropdown elements with a single class .select

<select class='select' name='select1' id='select1'>
  <option value='1'>1</option>
  <option value='2'>2</option>
  <option value='3'>3</option>
</select>

<select class='select' name='select2' id='select2'>
  <option value='4'>4</option>
  <option value='5'>5</option>
  <option value='6'>6</option>
</select>

<select class='select' name='select3' id='select3'>
  <option value='7'>7</option>
  <option value='8'>8</option>
  <option value='9'>9</option>
</select>

I know it can be achieved with the help of loop like this

var arr = [];
$('.select').each(function () {
   arr.push($(this).val());
});

But I already have so many loops in the code and I'm wondering if is there any way it can be achievable without a loop

Fiddle: http://jsfiddle.net/89cJC/

Upvotes: 5

Views: 8189

Answers (2)

Vikas Kandari
Vikas Kandari

Reputation: 1852

You can use jquery $.map function of jquery to deal with elements array

for example 

var arr = [];
arr = $.map($(".select"),function(select){
        return $(select).val();
});

console.log(arr);

Upvotes: 0

adeneo
adeneo

Reputation: 318182

No, there's no other way to get the value from multiple elements, you have to iterate over the elements to get the value from each of them.

There are other ways to write basically the same code

var arr = $.map($('.select'), function (el) { return el.value; });

or without jQuery

var elems = document.querySelectorAll('.select'),
    arr   = [];

for (var i=elems.length; i--;) arr.push(elems[i].value);

but they all iterate, there's no other way to do that.

Upvotes: 14

Related Questions