Ajax响应JSON数据不是在下拉菜单中设置

Question

$(document).ready(function(){ 
$("#prjname").autocomplete("ajaxcomplete.php", { 
     selectFirst: true, 
       matchContains:true 
    }).result(function(event, item) { 
       var id=item; 

        $.ajax({ 
          url: "db_data.php", 
          async: false, 
          data:"id="+id, 
          success: function(data) 
          { 

          } 
        }) 
       }); 
}); 

IUN Ajax响应我能得到这样的

[{"id":"1","name":"Analysis"},{"id":"2","name":"Coding"},{"id":"3","name":"Documentation"},{"id":"23","name":"ppt"}] 

的数据现在如何在下拉列表填充数据？我试过的代码如下：

var arr = $.parseJSON(data); 
       $('.act').empty(); 
       $('#actname').append($('<option/>').attr("value","").text("Select Activity")); 
        arr.filter(function (option) 
         { 
          $('#actname').append($('<option/>').attr("value", option.id).text(option.name)); 
         }) 

但它不会填充数据。

Answer 1

<script> 
$(document).ready(function(){ 
$("#prjname").autocomplete("ajaxcomplete.php", { 
     selectFirst: true, 
       matchContains:true 
    }).result(function(event, item) { 
       var id=item; 
        $.ajax({ 
          type: "POST", 
          dataType: "json", 
          url: "db_data.php", 
          data: "id="+id, 
           success: function(data) 
           { 
            alert(data); 
            $('.act').empty(); 
            $('#actname').append($('<option/>').attr("value","").text("Select Activity")); 
            for (var i = 0, len = data.length; i < len; ++i) 
            { 
             var prj = data[i]; 
             $('#actname').append($('<option/>').attr("value", prj.id).text(prj.name)); 
             $('.project_id').val(prj.project_id); 

            } 
           } 
          }) 

       }); 
}); 
</script> 

这是我的解决方案。

Answer 2

试试这个

$.ajax({ 
      url: "db_data.php", 
      async: false, 
      data:"id="+id, 
      dataType:'json', //<---just to make sure the response is in JSOn so that you don't have to parse it again 
      success: function(data) 
      { 
       $('.act').empty(); 
       $('#actname').append($('<option/>').attr("value","").text("Select Activity")); 
       $.each(data,function(i,v) 
       { 
        $('#actname').append($('<option/>').attr("value", v.id).text(v.name)); 
       }) 
      } 
     }) 

Answer 3

我不知道这是“正确”的做法或没有，但一般为了这个，我打造的下拉列表作为后端的PHP脚本的字符串，然后将该字符串返回给ajax调用。然后你可以做一个简单的“select_field_id.innerHTML = returned_string”来填充下拉列表。

像这样： 在PHP：

$selecthtml .= "<option value='" . $val . "'>" . $text . "</option>"; 
echo $selecthtml; 

然后在JavaScript：

document.getElementById("selectid").innerHTML = data; 

同样，不知道这是 “正确” 与否，但它为我工作。

Answer 4

当您成功回调：

success: function (data) { 
      response($.map(data, function (item) { 
       return { 
        label: item.name, 
        value: item.id 
       }; 
      })); 
     }}); 

编辑：这里一个很好的解释：http://www.jensbits.com/2011/08/24/using-jquery-autocomplete-when-remote-source-json-does-not-contain-label-or-value-fields/

Answer 5

$.ajax({ 
          url: "db_data.php", 
          async: false, 
          data:"id="+id, 
          success: function(data) 
          { 
           var arr = $.parseJSON(data); 
           $('.act').empty(); 
           $('#actname').append('<option value="" > Select Activity</option>'); 
           $.each(arr, function(i, item) { 
            $('#actname').append('<option value="'+item.id+'" >'+item.name+'</option>'); 

           }); 

          } 
     }) 

Answer 6

on success loop through options 
success: function(data) 
    { 
     var arr = $.parseJSON(data); 
     $('.act').empty(); 
     $('#actname').append('<option value="" > Select Activity</option>'); 
     $.each(arr, function(i, item) { 
      $('#actname').append(new Option(item.name,item.id)); 

     }); 

}