使用 AJAX 数据填充 Select2

Posted 2023-05-07

【中文标题】使用 AJAX 数据填充 Select2

【英文标题】：Populate Select2 with AJAX data

【发布时间】：2015-06-27 07:07:32

【问题描述】：

我正在使用 Select2 4.0.0-rc.2。

Options page 声明以下关于initSelection

过去，Select2 需要一个名为 initSelection 的选项，该选项在使用自定义数据源时定义，以便确定组件的初始选择。这已被data adapter 上的current 方法取代。

我只找到了使用 initSelection 的旧版本 Select2 的示例（请参阅 Setting initial values on load with Select2 with Ajax）

如何使用数据适配器加载默认数据？

这是我的初始代码（是树枝）

 $("# id ").select2(
            ajax: 
                    url: " path(attr.path) ",
                    dataType: 'json',
                    % if attr.placeholder is defined %
                    placeholder: ' attr.placeholder ',
                    % endif %
                    delay: 250,
                    data: function (term) 
                        return term;
                    ,
                    processResults: function (data) 
                        return results: data;
                    

                ,
            templateResult: function(data)
                return '<img  src="'+data.image+'">'+data.text;
            ,
            templateSelection: function(data)
                return '<img  src="'+data.image+'">'+data.text;
            ,

            cache: true,
            escapeMarkup: function (markup)  return markup; , // let our custom formatter work
            minimumInputLength: 2
        );

如果可能的话，我希望设置始终可见的选项并拥有其他 ajax，

【参考方案1】：

<select id="posow"></select>

对于上面的选择，我喜欢这样：

$(function () 
            $.getJSON( "/f3/tokenize/PO_SoW", function(respond) 
                $('#posow').select2(
                    multiple: true,
                    data: respond
                );
             );
);

服务器的响应是这样的：

[id: 'nms', text: 'FATP',
id: 'nms', text: 'ATF Plan',
id: 'nms', text: 'Endorse Plan',
id: 'nms', text: 'Endorse Date'
]

【参考方案2】：

你有详细的解释on their docs。如果您只需使用以下代码（从他们的文档页面中删除）就可以加载数据：

var $element = $('select').select2(); // the select element you are working with

var $request = $.ajax(
  url: '/my/remote/source' // wherever your data is actually coming from
);

$request.then(function (data) 
  // This assumes that the data comes back as an array of data objects
  // The idea is that you are using the same callback as the old `initSelection`

  for (var d = 0; d < data.length; d++) 
    var item = data[d];

    // Create the DOM option that is pre-selected by default
    var option = new Option(data.text, data.id, true, true);

    // Append it to the select
    $element.append(option);
  

  // Update the selected options that are displayed
  $element.trigger('change');
);

【讨论】：

我想将初始数据设置为 ajax 输入，我阅读了文档但不知道该怎么做。我添加我的设置代码。

是的，文档不是很好恕我直言。您到底如何使用（添加）适配器？是否有关于此配置的文档？

你有没有想过如何编码/添加适配器？我不明白自定义数据适配器如何支持 AJAX，因为 AJAX 的全部意义在于仅在请求完成时触发回调。我可能没有设计这个的人聪明？

干得好！有用。只需要小心： var option = new Option(item.text, item.id, true, true);

【参考方案3】：

作为 Milz 回答的延续，我要补充一点，您需要在末尾附加一个空值，否则将永远不会选择最后一个值。

  ...

  for (var d = 0; d < data.length; d++) 
    var item = data[d];

    // Create the DOM option that is pre-selected by default
    var option = new Option(data.text, data.id, true, true);

    // Append it to the select
    $element.append(option);
  

  var option = new Option('', '', true, true);
  $element.append(option);

  ...

也许还有其他方法可以做到这一点，但这对我有用。