Dropdown für eine bootstrapmodal von einem Ajax-POST

Question

Ich habe diese Bootstrap-modal-Ansicht:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
     <h4 class="modal-title" id="myModalLabel">Add missed Tara or Harvest Product</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
      <div class="form-group"> 
 
      <label class="font-noraml"> 
 
      Select event type 
 
      </label> 
 
     <div class="input-group"> 
 
      <select data-placeholder="Select" class="form-control chosen-select" style="width:350px;" tabindex="2"> 
 
       <option value="Tara"> 
 
       Tara Machine 
 
       </option> 
 
       <option value="Harvest"> 
 
       Harvest Product Machine 
 
       </option> 
 
      </select> 
 
      </div> 
 
     </div> 
 
      <div class="form-group"> 
 
      <label class="font-noraml"> 
 
      Product list 
 
      </label> 
 
     <div class="input-group"> 
 
      <select data-placeholder="Select" class="form-control chosen-select" style="width:350px;" tabindex="2"> 
 
       <option value="ajaxdata"> 
 
       get here the ajax data 
 
       </option> 
 
      </select> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     <button type="button" class="btn btn-primary">Save changes</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Was ich tun möchte, ist zu meiner Produktliste Dropdown mit Optionen zurück von meinem Ajax bevölkert in ein JSON-Format, um das zu tun, ich habe diese Schaltfläche Funktion, wenn ich die modal laden:

function onAddMissedEntryInfoClicked(entryId) { 
var currentEntryId = entryId; 
$('#myModal').modal('show'); //this load modal view 
$.ajax({ 
type: 'POST', 
url: "Monitor/getHarvestProductsDropdown", 
success: function(data) { 
    $($.parseJSON(data.msg)).map(function() { 
return $('<option>').val(this.value).text(this.label); 
}).appendTo('#ajaxdata'); 
    console.log(data); 
}, 
error: function(XMLHttpRequest, textStatus, errorThrown) { 
    alert(textStatus); 
} 
}); 
} 

Monitor/getHarvestProductsDropdown in den ur l ist die Funktion, die die Liste von mysql zurückgibt. Diese

ist, wie meine console.log (Daten) sucht:

Und das ist die json ich:

[{"name":"Orz"},{"name":"Orz Baza"},{"name":"Porumb"},{"name":"Lucerna"},{"name":"Rapita"},{"name":"Sorghum"},{"name":"Orz Primavaratic"},{"name":"Orz Primavaratic Baza"},{"name":"Floarea Soarelui"},{"name":"Triticale"},{"name":"Triticale Baza"},{"name":"Grau"},{"name":"Grau Baza"}] 

Aber wie ich diese json Liste anhängen kann in mein Dropdown?

PS1. Fehler:

VM375:1 Uncaught SyntaxError: Unexpected token u in JSON at position 0 at JSON.parse() at Function.m.parseJSON (https://code.jquery.com/jquery-1.11.3.min.js:5:15998) at Object.success (http://local.delta-rom.rrsolutions.ro/assets/js/my/monitor.js:244:13) at j (https://code.jquery.com/jquery-1.11.3.min.js:2:27309) at Object.fireWith [as resolveWith] (https://code.jquery.com/jquery-1.11.3.min.js:2:28122) at x (https://code.jquery.com/jquery-1.11.3.min.js:5:22111) at XMLHttpRequest.b (https://code.jquery.com/jquery-1.11.3.min.js:5:26030)

Answer 1

In Ihrem Ajax entscheidet, setzen dataType-'json' wie Sie json Daten vom Server erwartet. Dann iteriere eine Schleife und setze deinen Wert. Versuchen Sie den folgenden Code und lassen Sie mich den Status wissen.

$.ajax({ 
type: 'POST', 
dataType:'json', 
url: "Monitor/getHarvestProductsDropdown", 
success: function(data) { 

    $('#ajaxData').empty(); 
    for(var i = 0; i< data.length;i++){ 

     $('#ajaxData').append('<option value="'+data[i]['name']+'">'+data[i]['name']+'</option>'); 
    } 
    console.log(data); 
}, 
error: function(XMLHttpRequest, textStatus, errorThrown) { 
    alert(textStatus); 
} 
});