下拉列表中未设置 AJAX 响应 JSON 数据

ajax response json data not set in dropdown

本文关键字：响应 JSON 数据 AJAX 设置 下拉列表      更新时间：2023-09-26
$(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));
                        })

但它不会填充数据。

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

在成功回调中时：

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/

试试这个

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

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

这样：在 PHP 中：

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

然后在 javascript 中：

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

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

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

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

这是我的解决方案。

相关文章：