使用格式动态设置 select2 选项答案

【问题标题】：Dynamically set select2 options with formatting使用格式动态设置 select2 选项
【发布时间】：2018-03-02 01:42:56
【问题描述】：

Select2 v4.0 允许您通过创建新的Option 对象并附加它们来动态地将选项添加到下拉列表中。如何动态添加不仅仅是 id 和 text 的数据？

更具体地说，如果 select2 使用 templateResult 配置来设置不仅仅是纯文本的数据样式，那么添加 Options 限制性太大。此回调仅适用于库自己的数据格式。

$('#select2').select2({
    templateResult: function(data) {
        return data.text + ' - ' + data.count;
    }
});
$('#select2').append(new Option('Item', 1, false, false));

我想在打开下拉菜单时添加更复杂的数据并将结果模板化。

我尝试了一些丑陋的解决方法，例如

var opt = new Option('Item', 1, false, false);
opt.innerHTML = '<div>Item</div><div>Count</div>';

但是 HTML 被剥离并且 select2 显示纯文本。

【问题讨论】：

标签： javascript jquery-select2 jquery-select2-4

【解决方案1】：

也许只是使用标准的 html/jQuery 并自定义您需要的任何内容。

$('#select2').append("<option value='"+ id +"'>" + text+ "</option>");

【讨论】：

select2 似乎用这个解决方案剥离了标签，只给出纯文本结果。它不会让您进一步格式化选项。

【解决方案2】：

如a closed Github issue 中所述，该库的维护者声明不会对此功能提供任何支持。我发现唯一合理的解决方法是在填充元素后重新初始化它：

function initSelect2(data) {
  var select = $('#select2');
  select.select2({
    templateResult: function(data) {
      return data.text + ' - ' + data.count;
  });
  if (data.length) {
    select.data('loaded', 1);
    select.select2('open');
  } else {
    select.on('select2.opening', fillSelect2);
}

function fillSelect2() {
  var select = $('#select2');
  if (select.data('loaded')) {
    return;
  }
  var data = [];
  var data.push({id: 1, text: 'One', count: 1});
  var data.push({id: 2, text: 'Two', count: 2});
  var data.push({id: 3, text: 'One', count: 3});
  initSelect2(data);
}

initSelect2();

【讨论】：