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/。那么如何实现呢？

- suo

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

- adeneo

---

好的，最后一个问题：如何将选中的值设置为属性“selected”? 我想这样做：$('select[name=cavie] option[value='+?+']').prop('selected', true); - suo

selected 属性被设置在选项上，但是设置选择框的值可以达到相同的效果，所以你其实不需要设置 selected 属性。如果你真的想要设置，可以参考这个链接 -> https://jsfiddle.net/epzjdswn/26/ - adeneo

非常好。谢谢！ - suo

Answer 2

您可以利用在.optimum上调用的index#each()函数将是vals数组的index - 请参见下面的演示：

var vals = ["4", "8", "12"];
$('.optimum').each(function(i) {
  $(this).val(vals[i])
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

- kukkuz

Answer 3

你忘记针对特定的选择器进行目标设置，而是针对所有具有 optimum 类的选择器进行目标设置，只需使用 eq 函数来针对特定的选择器进行目标设置。

var vals = ["4", "8", "12"];
for(var i in vals){
  $('.optimum').eq(i).val(vals[i]); 
}

- Dustin Poissant

Answer 4

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

for(var i in vals)
{
    $('.optimum:nth-child(' + (+i + 1) + ')').val(vals[i]); 
}

- Alexander Bolzhatov