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

可能只是使用标准的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选项

2 个答案: