附加到来自 ajax 请求的数据答案

【问题标题】：Append to data from ajax request附加到来自 ajax 请求的数据
【发布时间】：2020-07-19 19:02:54
【问题描述】：

我有一个调用服务器并将结果（即名称列表）附加到选择下拉列表的函数。现在我想在结果数据中附加一个选择名称选项。这是我的代码

$('#state').on('change', function() {
                $.ajax({
                    type: 'GET',
                    url: '/get-names/' + this.value,
                    success: function(data) {
                        $('#names').empty();
                        $.each(data.names, function(key, value){
                            $('#names').append('<option value="'+value.name+'">'+value.name+'</option>');
                        });
                    }
                });
            })

结果给了我一个对象数组

name: [{id: 119, manager_id: 7, name: "Sam"}, {id: 120, manager_id: 7, name: "Shreck"}]

如何将“选择名称”选项附加到结果中？

【问题讨论】：

在开始循环之前执行此操作。当您已经知道如何在循环中添加它们时，真的不清楚为什么再添加一个会很复杂

标签： javascript jquery

【解决方案1】：

只需将其附加到 each 循环之前。

$('#names').empty();
$('#names').append('<option value="Select Name">Select Name</option>');
$.each(data.names, function(key, value){
   $('#names').append('<option value="'+value.name+'">'+value.name+'</option>');
});

【讨论】：

【解决方案2】：

$('#state').on('change', function() {
    $.ajax({
        type: 'GET',
        url: '/get-names/' + this.value,
        success: function(data) {
            $('#names').html('<option value="" selected>Select Name</option>');
            $.each(data.names, function(key, value){
                $('#names').append('<option value="'+value.name+'">'+value.name+'</option>');
            });
        }
    });
});

【讨论】：

【解决方案3】：

如果您希望它位于列表的顶部 - 只需使用 unshift 将文本放置在数组的开头：

success: function(data) {
                        $('#names').empty();
                        data.names.unshift("Select Name");
                        $.each(data.names, function(key, value){
                            $('#names').append('<option value="'+value.name+'">'+value.name+'</option>');
                        });
                    }

【讨论】：