Jquery - Assign array values to dropdowns

Question

I have dropdowns that are being appended dynamically on a page and on the same page, there's an array being posted, so that, the length of the array will always equal the number of dropdowns appended. For example:

<select name="cavie" class="optimum"><option value=""></option><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option></select>

<select name="cavie" class="optimum"><option value=""></option><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option></select>

<select name="cavie" class="optimum"><option value=""></option><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option></select>

and a javascript array:

var vals = ["4", "8", "12"];

The aim is to assign the array values to the dropdowns in their order.

Currently, I'm using a for loop but this will set all the select options to the value of the last array:

var vals = ["4", "8", "12"];

for(var i in vals)
{
    $('.optimum').val(vals[i]); 
}

The above is laid out in this fiddle:

https://jsfiddle.net/epzjdswn/2/

So how can this be achieved?

Answer 1

You'll have to select the element based on index as well, otherwise you set the value of the first item in the collection on every iteration.

You can do that using eq(), and you could replace the for loop with jQuery's $.each

var vals = ["4", "8", "12"];

$.each(vals, function(i, val) {
    $('.optimum').eq(i).val(val);
});

FIDDLE

There's also the option to do it the other way around, and iterate over elements instead (using a little ES2015 for dramatic effect)

var vals = ["4", "8", "12"];
$('.optimum').val(i => vals[i]);

FIDDLE