如何将属性传递给select2？

我正在使用Select2 4.0。 我有一个选项列表，其中一些是“删除”，我想表明哪些是。 我的选择元素是这样的：

.deleted { color: red; }   Item 1 Item 2 Item 3  

它的初始化如下：

   $(function() { $("#item-list").select2({ placeholder: 'Select item' }); });  

但是，在select2生成的结果HTML代码中，我看不到任何引用该类的方法。 还尝试了选项上的data-deleted属性，没有运气。

我看到的唯一接近的是templateResult选项，我可以在其中检查opt.element.className 。 但我无法从那里看到如何访问select2选项。 无论如何，回调运行在每一次搜索上都不是我想要的。

还有其他方法可以在Select2中设置特定选项的样式吗？

更新：如注释中所述，有一个find()函数，但它只获取原始的元素，而不是select2生成的

元素。 这是我尝试过的：

 var sel2 = $("#item-list").select2({ placeholder: 'Select item' }); sel2.find('.deleted').each(function() { $(this).css('color', 'red'); }); 

Answer 1

从Select2 4.0.1 （刚刚发布）开始 ，您可以使用templateResult选项传输类。 第一个参数是显示的数据对象，第二个参数是将显示的容器。

 $("select").select2({ templateResult: function (data, container) { if (data.element) { $(container).addClass($(data.element).attr("class")); } return data.text; } }); 

 .yellow { background-color: yellow; } .blue { background-color: blue } .green { background-color: green; } 

     Alabama Alaska Arizona  

Answer 2

如果您还想使用将类添加到所选项目，请从templateSelection调用相同的函数。

 function select2CopyClasses(data, container) { if (data.element) { $(container).addClass($(data.element).attr("class")); } return data.text; } $("select").select2({ templateResult: select2CopyClasses, templateSelection: select2CopyClasses }); 

Answer 3

如果要在默认情况下执行此操作，则每个新select2都会将类定义从选项复制到select2-element。 加载select2.js后包含代码

 $.fn.select2.defaults.set("templateResult", function(item, li) { if (item && item.element && item.element.className.length) { $(li).addClass(item.element.className); } }