Question

我正在使用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 width="30" src="'+data.image+'">'+data.text;
            },
            templateSelection: function(data){
                return '<img width="30" src="'+data.image+'">'+data.text;
            },

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

如果有可能我想要设置始终可见的选项并且具有ajax other，

Answer 1

您有详细解释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');
});

Answer 2

<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'}
]

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

  ...

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

使用AJAX数据填充Select2

3 个答案: