オブジェクトのルーピングとオプションと値を使った選択要素の投入

Question

私は、以下のコード内の '＃shuttle-dst'（シャトル目的地）のselect要素を、与えられた設定オブジェクトの値に基づいてオプションを設定しようとしています。このコードは、以前に存在していたオプションのselect要素を最初にクリアしてから、configsオブジェクトの割り当てられたプロパティをループし、そこにあるこの例の名前プロパティの値だけをコンソールに出力しますこの特定の構成では5だった：

Admin User 
MPR User 
SAMHSA User 
States User 
All States User 

しかし、このコードは、割り当てられた値の5つすべて、ちょうど最後の1とselect要素移入されません - 「すべての国のユーザーを」。どうして？

function loadConfigurations(configs){ 
    $('#shuttle-dst').empty(); 
    for(var i=0; i < configs.assigned.length; i++){ 
    var item = configs.assigned[i]; 
    console.log(item.name); 

     $.each(item, function(){ 
      $('#shuttle-dst').html('<option value="' + item.value + '">' + item.name + '</option>'); 
     }); 
    } 
} 

Answer 1

まずあなたは、各項目のforループ内で既にしているので、あなたは、$.each()を呼び出す必要はありません。あなたの問題を解決するために

、あなたは＃シャトル-DST要素の代わりに、html()（append()が発信者要素に新しい要素を追加し、html()は、呼び出し側要素のHTMLを置き換える）にappend()を使用する必要があります。

たとえば

：アイテムの

function loadConfigurations(configs) { 
    $('#shuttle-dst').empty(); 
    for (var i=0; i < configs.assigned.length; i++) { 
     var item = configs.assigned[i]; 
     $('#shuttle-dst').append(
      '<option value="' + item.value + '">' + item.name + '</option>' 
     ); 
    } 
}