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

上面這個小提琴的佈局：

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

那麼這怎麼能實現呢？

Answer 1

您還必須根據索引選擇元素，否則在每次迭代中設置集合中第一項的值。

你可以做，使用eq()，你可以更換for循環使用jQuery的$.each

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() funtion呼籲.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

您忘了定位該特定的選擇，而是針對所有選擇e 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]); 
}