下拉從一個bootstrapmodal一個AJAX POST

Question

我有這樣的自舉模式的看法：

<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>

我想要做的就是填充我的產品列表下拉與我在阿賈克斯返回選項一個JSON格式，爲了做到這一點，我有這個按鈕的功能，當我加載模式：

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

監視器/ getHarvestProductsDropdown在UR l是從mysql返回列表的函數。

這是怎麼我的console.log（數據）正在尋找：

這是JSON我得到：

[{"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"}] 

但我怎麼能追加在JSON列表我的下拉？

PS1。錯誤：

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

在您選擇採用AJAX，當你從服務器期望的JSON數據集dataType到'json'。然後迭代一個循環並設置你的值。 請嘗試下面的代碼，並讓我知道狀態。

$.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); 
} 
});