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

     }); 

}