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

あなたはインデックス.optimumに呼び出され#each()目的球が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

あなたはその特定の選択をターゲットにするのを忘れました。代わりに、すべての選択をth optimumクラスでは、eq関数を使用して特定のselectをターゲットにします。

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