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

Question

我正在使用 Select2 4.0。我有一个选项列表，其中一些是 "deleted"，我想指出哪些是哪些。我的 select 元素是这样的：

<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 代码中，我看不到任何引用 class 的方法。还尝试了选项的 data-deleted 属性，但没有成功。

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

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

更新：如评论中所述，有一个 find() 函数，但它只获取原始的 <option> 元素，而不是 select2 中的 <li> 元素产生。这是我的尝试：

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

sel2.find('.deleted').each(function() {
    $(this).css('color', 'red');
});

Answer 1

自 Select2 4.0.1 (just released) 起，您可以使用 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

如果您还想使用将 class 添加到所选项目，请从 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 都会将 class 定义从选项复制到 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);
  }
  return item.text;
}

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

How to pass <option> attributes to select2?

jquery

html-select

jquery-select2