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]); 
}

以上是这个小提琴：

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

Answer 2

您可以使用#each()上调用的索引 .optimum功能将成为vals数组的索引这一事实 - 见下面的演示：

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>

Answer 3

您忘记定位该特定选择，而是使用optimum类定位所有选择，只需使用eq功能定位特定选择。

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

Answer 4

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

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

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

4 个答案: