如何在 select2 中为 select 标签添加新选项 - 远程数据

Question

我已经实现了一个应用程序，其中一个表单的下拉字段中有很多数据，加载该页面需要一些时间，所以我想在 ajax 调用中加载它，但是回调数据没有创建新的选项标签并附加到 select 标签，这是我试过的

我尝试了所有这些代码，但没有一个有效！

$(document).ready(function () {
        $('#guestinfo').select2({
            ajax: {
                url: '{% url "booking:return_ajax_guests" %}',
                dataType: 'json',
                processResults: function (data) {
                    console.log(data.length)
                    if(data.length > 0){
                        for(i=0;i <= data.length;i++){
                            //var options = data[i].full_name
                            //console.log(options)
                            //$('#guestinfo').append("<option value='"+options+"'>"+options+"</option>")
                            //$('#guestinfo').trigger('change'); 

                            //var opts = new Option("option text", "value");
                            //$(o).html("option text");
                            //$("#guestinfo").append(o);                            
                            $('#guestinfo').append($('<option>', { 
                                value: options,
                                text : options 
                            }));                            
                        }
                    }
                    //return {
                    //    results: $.map(data, function (item) {
                    //        $('#guestinfo').append("<option value='"+item.full_name+"' selected>"+item.full_name+"</option>")
                    //        $('#guestinfo').trigger('change'); 
                    //        return {full_name: item.full_name, city: item.city__name};
                    //    })
                        //console.log(results)
                    //};
                }
            },
            minimumInputLength: 0
        });

    })

<div class="col-span-5 groupinput relative bglightpurple mt-2 rounded-xl">
    <label class="text-white absolute top-1 mt-1 mr-2 text-xs">{% trans "full names" %}</label>
    <select name="guestinfo" id="guestinfo" class="visitors w-full pr-2 pt-6 pb-1 bg-transparent focus:outline-none text-white">
        <option value="------">---------</option>
    </select>
</div>

select2 版本：2.0.7 这是我的服务器端代码 (django)

@login_required
def return_ajax_guests(request):
    if request.is_ajax():
        term = request.GET.get('term')
        all_guests = Vistor.objects.all().filter(full_name__icontains=term)        
        return JsonResponse(list(all_guests.values('full_name','city__name','dob')),safe=False)

控制台显示的数据很好！但我不能将它附加到 select 标签中！请问我做错了什么吗？先感谢您 .. 已更新 控制台中 for 循环的数据

console.log（选项） console.log（数据）

Answer 1

首先，无需手动创建选项，select2 在提供正确数据时自动创建它们。

话虽如此，您的数据应采用 [{id: 'id', text: 'text'}, ...] 格式，以便它与 select2 一起正常工作。

试试这个

$('#guestinfo').select2({
    ajax: {
        url: '{% url "booking:return_ajax_guests" %}',
        dataType: 'json',
        data: function(params){ // you can delete this part if you don't intend to filter the data on the server
            return {
                search: params.term, // search term
            };
        },
        processResults: function (data, params) {
            return {
                results: data.map(({full_name}) => ({id: full_name, text: full_name}))
            };
        }
    },
    minimumInputLength: 0
});

如何在 select2 中为 select 标签添加新选项 - 远程数据

how to add new option for select tag in select2 - remote data

javascript

jquery

django

jquery-select2