Looping über ein Objekt und Bestücken von A Wählen Sie Element mit Optionen und Werte

Question

ich, dass zu füllen versuchen ‚# Shuttle-dst‘ (für Shuttle-Ziel) select-Element in dem folgenden Code mit Optionen basierend auf den Werten eines bestimmtes Konfigurationsobjekts . Dieser Code tut, was ich will, das zuerst das select-Element der Optionen deaktivieren, die zuvor bestanden, es dann durch die zugeordneten Eigenschaften der configs Schleifen-Objekt, und druckt auf die Konsole nur den Wert der Namenseigenschaften in diesem Beispiel waren fünf in dieser besonderen Konfiguration:

Admin User 
MPR User 
SAMHSA User 
States User 
All States User 

Aber dieser Code das select-Element mit allen fünf der zugewiesenen Werten, nur die letzten nicht bevölkert nicht - ‚Alle Staaten Benutzer‘. Warum?

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

Erstens brauchen Sie nicht $.each() zu nennen, da Sie bereits innerhalb der sind für jeden Punkt für Schleife.

Ihr Problem zu beheben, sollten Sie append() auf Ihrem # Shuttle-dst Element statt html() (append() fügt ein neues Element mit dem Anrufer Element, html() HTML-Code des Anrufers Element ersetzt) ​​verwenden.

Zum Beispiel:

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