使用格式动态设置 select2 选项

Question

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

更具体地说，如果 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 显示纯文本。

Answer 1

也许只是使用标准 html/jQuery 并根据需要自定义。

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

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

使用格式动态设置 select2 选项

Dynamically set select2 options with formatting

javascript

jquery-select2

jquery-select2-4