javascript - 使用格式动态设置 select2 选项

Question

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

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

$('#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 显示纯文本。

Answer 1

该库的维护者表示不会对此功能提供任何支持，如 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();