Select2未在编程中显示所选值文本

Question

我使用select2（v4.0.13，无法更改它）创建一个下拉列表，并在用户可以搜索事物的表单上使用AJAX请求。该页面是用百里叶构建的，当视图重新加载时，下拉值就会丢失。

Following the recommendation of the documentation itself when you deal with

let selectedOption = $('#select2-id');
$.ajax({
   type: 'GET',
   dataType: 'json',
   url: baseAjaxUrl + '/api_endpoint?q=' + myVar,
}).then(function (data) {
   if (data.length !== 0) {
       let optionValues = data[0];
       let option = new Option(optionValues.name, optionValues.id, true, true);
       selectedOption.append(option).trigger('change.select2');
       selectedOption.trigger({
           type: 'select2:select',
           params: {data: optionValues}
       });
   }
});

现在，当视图重新加载时，下拉列表具有值，但没有显示其文本。一个X似乎可以删除它，如果将鼠标悬停在工具提示中，则将显示应在下拉列表中显示的文本。

在Select2生成的＆lt; span＆gt;中，我可以看到带有应显示的值的标题属性：

<span class="select2-selection__rendered" id="select2-anId-container" role="textbox" aria-readonly="true" title="The text that should be displayed">
    <span class="select2-selection__clear" title="Remove all items" data-select2-id="20">×</span>
</span>

Select2初始化为：

$('#select2-id').select2({
   ajax: {
       url: baseAjaxUrl + '/api_endpoint',
       dataType: 'json',
       delay: 180,
       data: function (parameters) {
           return {
               q: parameters.term,
               page: parameters.page
           };
       },
       processResults: function (data, page) {
           return {
               results: data
           };
       }
   },
   placeholder: {
       id: "-1",
       text: "Select an item"
   },
   allowClear: true,
   escapeMarkup: function (markup) {
       return markup;
   },
   minimumInputLength: 5,
   templateResult: formatItem,
   templateSelection: formatItemSelection,
   theme: "bootstrap",
   width: myCustomWidth
});

问题是什么或我做错了什么？

问候。

Answer 1

找到此答案，我的问题是选择一个选项，segtplatesElection。检查功能我意识到我收到的对象具有字段id和name。处理 select2 的对象还具有字段id和名称，但它具有另一个，text，这是它用于显示值的一种！

因此，在功能中，我将用于templateSelection我要做：

if (data.text === "") {
   data.text = data.name;
}
... other stuff ...
return data.text;

完成！