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

在您的成功回调中：

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 2

$.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 3

尝试这个

 $.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 4

我不确定这是否是“正确”的做法，但通常为此我将下拉列表构建为后端 PHP 脚本中的字符串，然后将该字符串返回给 ajax 调用。然后你可以做一个简单的“select_field_id.innerHTML = returned_string”来填充下拉列表。

像这样：在 PHP 中：

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

然后在javascript中：

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

同样，不确定这是否“正确”，但它对我有用。

Answer 5

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

        });

}

Answer 6

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

这是我的解决方案。