Wie man <option> Attribute an select2 übergibt?

Question

Ich verwende Select2 4.0. Ich habe eine Liste mit Optionen, von denen einige "gelöscht" sind und ich möchte angeben, welche welche sind. Mein select-Element ist wie folgt:

<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> 

Und es ist wie folgt initialisiert:

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

Doch auf dem resultierenden HTML-Code, der select2 ich jede mögliche Weise nicht sehen, erzeugt die Klasse zu verweisen. Auch versuchte ein data-deleted Attribut auf der Option, ohne Glück.

Die einzige Sache, die ich sehe, die nahe kommt, ist die templateResult Option, in der ich nach opt.element.className überprüfen kann. Aber ich kann nicht sehen, wie man von dort auf die select2-Option zugreift. Jedenfalls läuft dieser Rückruf bei jeder einzelnen Suche, was ich nicht will.

Gibt es eine andere Möglichkeit, bestimmte Optionen in Select2 zu stylen?

UPDATE: wie in den Kommentaren darauf hingewiesen, gibt es eine find() Funktion, aber das wird nur die ursprünglichen <option> Elemente, nicht die <li> Elemente, die select2 erzeugt. Hier ist, was ich versucht:

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

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

Answer 1

Ab Select2 4.0.1 (just released) können Sie übertragen Klassen mit der templateResult Option. Der erste Parameter wird das Datenobjekt angezeigt wird, und das zweite Argument ist der Container, in angezeigt.

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

Wenn Sie auch die hinzufügen, die Klasse zu dem ausgewählten verwenden möchten Elemente rufen die gleiche Funktion von 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

Wenn Sie dies standardmäßig tun möchten, kopiert jedes neue select2 die Klassendefinition von der Option in select2-element. Fügen Sie den Code nach dem Laden ein select2.js

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