Select2 - Ajax 数据 - 根据查询填充下拉列表答案

【问题标题】：Select2 - Ajax Data - Populate The Dropdown based on querySelect2 - Ajax 数据 - 根据查询填充下拉列表
【发布时间】：2026-02-07 20:00:02
【问题描述】：

我正在使用 Select2 填充英国城镇的下拉列表。由于 UK Towns DB 很大，我认为 AJAX 调用将是引入数据的最佳方式。

我已经构建了一个 post 函数和一些 PHP（在 Codeigniter 中）来捕获查询并解析它。

我可以看到数据正在发布和响应，但我的 Select2 没有填充数据。

我的 jQuery 是：

 $("#areas").select2(
    {
        tags: [],
        ajax: {
            url: '/profile/get-towns',
            dataType: 'json',
            type: "POST",
            quietMillis: 100,
            data: function (term) {
                return {
                    query: term
                };
            },
            results: function (data) {
                return {
                    results: data.town_id
                }
            },
            cache: true
        },
        escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
        minimumInputLength: 4,
        placeholder         : "Start typing your Town / City",
        maximumSelectionSize: 2
    }
);

我的回答 jSON (Example) 如下：

[{"town_id":"16994","town":"Hartle"},{"town_id":"16995","town":"Hartlebury"},{"town_id":"16996","town"
:"Hartlebury"},{"town_id":"16997","town":"Hartlebury Common"},{"town_id":"16998","town":"Hartlepool"
},{"town_id":"16999","town":"Hartley"},{"town_id":"17000","town":"Hartley"},{"town_id":"17001","town"
:"Hartley"},{"town_id":"17002","town":"Hartley"},{"town_id":"17003","town":"Hartley Green"},{"town_id"
:"17004","town":"Hartley Green"},{"town_id":"17005","town":"Hartley Mauditt"},{"town_id":"17006","town"
:"Hartley Wespall"},{"town_id":"17007","town":"Hartley Wintney"},{"town_id":"27051","town":"New Hartley"
},{"town_id":"35891","town":"Stowe-by-Chartley"}]

我哪里错了？理想情况下，我希望选择下拉列表具有选择值 = town_id 和选择选项作为城镇名称。

谢谢。

【问题讨论】：

标签： php jquery codeigniter jquery-select2

【解决方案1】：

在您的 select2 配置中：

results: function (data) {
    var res = [];
    for(var i  = 0 ; i < data.length; i++) {
        res.push({id:data[i].town_id, text:data[i].town});
    }
    return {
        results: res
    }
},

因为 select2 想要将结果作为带有键 id 和 text 的对象数组。

否则你已经可以返回一个格式良好的对象

[
   {"id":"16994","text":"Hartle"},
   {"id":"16995","text":"Hartlebury"},
   {"id":"16996","text":"Hartlebury"},
   {"id":"16997","text":"Hartlebury Common"}
]

然后

results: function (data) {
    return {
        results: data
    }
},

【讨论】：

我只想指出，在 4.0.0 中，我们已将 results 重命名为 processResults，但同样的想法仍然适用（您需要 id 和 text 键）。跨度>
是的。新规格要processResults。

【解决方案2】：

在您的 ajax 调用中，尝试添加 success。像这样的：

success: function( json ) {
   $.each(items, function (i, item) {
       $('#mySelect').append($('<option>', { 
           value: item.value,
           text : item.text 
       }));
   )};
}

【讨论】：

在成功函数中，只需添加警报或日志以检查“json”对象是否返回数据。它应该打印数据。如果它返回，则问题出在追加上。告诉我
Select2 提供了自己的“成功”处理程序（OP 使用），无需绕过 Select2 生成结果的方式。