使用選項和值填充選擇元素

Question

我想填充'＃shuttle-dst'（用於穿梭目的地）在下面的代碼中選擇元素，並使用基於給定配置對象的值的選項。這段代碼完成了我想要的任務，它首先清除先前存在的選項的select元素，然後循環遍歷configs對象的指定屬性，然後在控制檯中輸出名稱屬性的值，在這個特定的配置五個：

Admin User 
MPR User 
SAMHSA User 
States User 
All States User 

但是這個代碼不填充所有五個分配的值的選擇元素，只是最後一個 - 「所有國家的用戶」。爲什麼？

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

首先，您不需要撥打$.each()，因爲您已經在每個項目的for循環中。

爲了解決您的問題，您應該將＃穿梭DST元素，而不是html()上使用append()（append()增加了新的元素來電元素，html()代替主叫方元素的HTML）。

例如：在項目

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