使用格式动态设置 select2 选项

Posted 2023-05-07

【中文标题】使用格式动态设置 select2 选项

【英文标题】：Dynamically set select2 options with formatting

【发布时间】：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 显示纯文本。

【参考方案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();