如何传递< option>属性选择2？ [英] How to pass <option> attributes to select2?

问题描述

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

I'm using Select2 4.0. I have a list of options, some of which are "deleted" and I want to signify which are which. My select element is like this:

<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代码中，我看不到任何引用该类的方法。还尝试了该选项的数据删除属性，没有运气。

However, on the resulting HTML code that select2 generates I don't see any way to reference that class. Also tried a data-deleted attribute on the option, with no luck.

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

The only thing I see that comes close is the templateResult option, where I can check for opt.element.className. But I cannot see how to access the select2 option from there. Anyway that callback runs on every single search which is not at all what I want.

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

Is there some other way to style particular options in Select2?

更新：如评论中所述，有一个 find（）函数，但只能获得原始< ;选项> 元素，而不是select2生成的< li> 元素。这是我试过的：

UPDATE: as noted in the comments there is a find() function, but that only gets the original <option> elements, not the <li> elements that select2 generates. Here's what I tried:

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

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

推荐答案

截至Select2 4.0.1 (just release），您可以使用 templateResult 选项转移课程。第一个参数是显示的数据对象，第二个参数是它将显示的容器。

As of Select2 4.0.1 (just released), you can transfer classes with the templateResult option. The first parameter is the data object being displayed, and the second argument is the container that it will be displayed in.

$("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>

这篇关于如何传递< option>属性选择2？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！