javascript - Jquery - 将数组值分配给下拉列表

Question

我有动态附加在页面上的下拉列表，在同一页面上，有一个数组被发布，因此，数组的长度将始终等于附加的下拉列表的数量。例如:

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

和一个 javascript 数组:

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

目的是将数组值按顺序分配给下拉菜单。

目前，我正在使用 for 循环，但这会将所有选择选项设置为最后一个数组的值:

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

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

上面的内容在这个 fiddle 中:

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

那么如何实现呢？

Answer 1

您还必须根据索引选择元素，否则您会在每次迭代时设置集合中第一项的值。

您可以使用 eq() 来做到这一点，您可以用 jQuery 的 $.each 替换 for 循环

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

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

FIDDLE

也可以选择反过来，迭代元素(使用一点 ES2015 来获得戏剧效果)

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

FIDDLE