从 slect2.js 标签中的选项获取类

Question

我正在使用带有以下代码的 select2.js 库，我希望拥有从选项标记到 select2 列表的所有类，例如 <li class="active select2-selection__choice" title="AA"><span ...

<select id="example" multiple="multiple" style="width:100%">
<option value="AA" class="active" selected>AA</option>
<option value="BB" class="stanby" selected>BB</option>
<option value="CC"class="active" selected>CC</option>

$("#example").select2();

Here 是可以使用的小提琴。

Answer 1

这可以通过提供自定义selectionAdapter 选项来实现。我基于 MultipleSelection 的 Select2 实现创建了一个。

// create our custom selection adapter by extending the select2 default one
$.fn.select2.amd.define('select2-ClassPreservingMultipleSelection',[
    'jquery',
    'select2/selection/multiple',
    'select2/utils'
], function ($, MultipleSelection, Utils) {
    function ClassPreservingMultipleSelection ($element, options) {
        ClassPreservingMultipleSelection.__super__.constructor.apply(this, arguments);
    }

    Utils.Extend(ClassPreservingMultipleSelection, MultipleSelection);

    // this function was changed to propagate the `selection` argument
    ClassPreservingMultipleSelection.prototype.selectionContainer = function (selection) {
        var $baseContainer = ClassPreservingMultipleSelection.__super__.selectionContainer.apply(this, arguments);

        // this line is what actually adds your CSS-classes
        return $baseContainer.addClass(selection.element.className);
    };

    // this is a copy-paste of the base method with only one line changed
    ClassPreservingMultipleSelection.prototype.update = function (data) {
        this.clear();

        if (data.length === 0) {
            return;
        }

        var $selections = [];

        for (var d = 0; d < data.length; d++) {
            var selection = data[d];

            // This is the only changed line in this method - we added the 'selection' propagation
            var $selection = this.selectionContainer(selection);
            var formatted = this.display(selection, $selection);

            $selection.append(formatted);
            $selection.prop('title', selection.title || selection.text);

            $selection.data('data', selection);

            $selections.push($selection);
        }

        var $rendered = this.$selection.find('.select2-selection__rendered');

        Utils.appendMany($rendered, $selections);
        console.log($rendered.html());
    };

    return ClassPreservingMultipleSelection;
});

$("#example").select2({
    selectionAdapter: $.fn.select2.amd.require('select2-ClassPreservingMultipleSelection')
});

这是给你的updated JsFiddle。