如何将<option>属性传递给select2？

Question

我正在使用Select2 4.0.我有一个选项列表,其中一些是"删除",我想表明哪些是哪些.我的选择元素是这样的:

<style>.deleted { color: red; }</style>

<select name="itemid" id="item-list" tabindex="1">
    <option></option>
    <option value="1">Item 1</option>
    <option value="2" class="deleted">Item 2</option>
    <option value="3">Item 3</option>
</select>

它的初始化如下:

<script src="/static/js/select2.min.js"></script>
<script>
$(function() {
    $("#item-list").select2({
        placeholder: 'Select item'
    });
});
</script>

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

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

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

更新:如注释中所述,有一个find()函数,但只获取原始<option>元素,而不是<li>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; }

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.js"></script>

<select class="select2">
  <option value="AL" class="yellow">Alabama</option>
  <option value="AK" class="blue">Alaska</option>
  <option value="AZ" class="green">Arizona</option>
</select>

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
});