Question

我试图将这些数据从服务器返回到下拉列表但不知道如何操作，因为每个对象名称都以随机ID开头。这就是我在这里要做的事情：

 $("#CampaignOpenActionSubscriber_campaign_id").change(function() {
   var el = $(this);

   $.ajax({
     type: 'POST',
     url: "Dropdownlist",
     data: 'csrf_token=' + $('meta[name=csrf-token-value]').attr('content') +'&Selectedcampaign_id=' + el.val(),
     success: function (response) {
       var jsonResponse = $.parseJSON(response);
       for(var i=0; i< jsonResponse.length; i++){
         $("#selectCourse").append(
           $('<option>').text(jsonResponse[i]).val(jsonResponse[i])
         );               
       }
     }
   });
 });

这就是我从JSON回复中得到的回复......：

 {288878: "FOO", 288881: "BAZZ", 288882: "YOLLO"}

我如何将其放入下拉列表？

Answer 1

要实现这一点，您需要使用for.. in循环来迭代从AJAX调用返回的对象的键。试试这个：

＆＃13;

var jsonResponse = {
  288878: "FOO",
  288881: "BAZZ",
  288882: "YOLLO"
}

var html = '';
for (var key in jsonResponse) {
  html += '<option value="' + key + '">' + jsonResponse[key] + '</option>';
}
$("#selectCourse").append(html);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selectCourse"></select>

＆＃13;

另请注意，JSON.parse()在您的AJAX success处理程序中是多余的，因为jQuery会在检测到JSON时对您的响应进行反序列化。如果没有自动发生，您可能只需要将dataType: 'json'添加到选项中。

Answer 2

您可以使用jQuery.each()遍历jsonResponse对象，并使用jQuery.append()填充所有选项。

代码：

var $select = $('#selectCourse'),
    jsonResponse = {288878: "FOO", 288881: "BAZZ", 288882: "YOLLO"};

$.each(jsonResponse, function(key, value) {
    $select.append('<option value=' + key + '>' + value + '</option>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="selectCourse">
  <option value="">Select...</option>
</select>

Answer 3

使用for ... in循环

var options = '';
for( var key in jsonResponse){
   options += '<option value ="key">' + jsonResponse[key] +'</option>
};
$("#selectCourse").html(options)

Answer 4

可以使用$.each( object, function(key, value){})来迭代对象

＆＃13;

var data = {288878: "FOO", 288881: "BAZZ", 288882: "YOLLO"};

$.each(data, function(prop, val){
   $('select').append( $('<option>',{text:val, value:prop}))
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select></select>

＆＃13;

如何将此JSON响应放入下拉列表中

4 个答案: