Come passare gli attributi <option> per selezionare2?

Question

Sto usando Select2 4.0. Ho una lista di opzioni, alcune delle quali sono "cancellate" e voglio indicare quali sono quali. Il mio elemento di selezione è come questo:

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

Ed è inizializzato in questo modo:

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

Tuttavia, sul codice HTML risultante che select2 genera non vedo alcun modo per fare riferimento a quella classe. Ho anche provato un attributo data-deleted sull'opzione, senza fortuna.

L'unica cosa che vedo che si avvicina è l'opzione templateResult, dove posso controllare per opt.element.className. Ma non riesco a vedere come accedere all'opzione select2 da lì. Ad ogni modo quella callback funziona su ogni singola ricerca che non è affatto ciò che voglio.

C'è qualche altro modo per assegnare particolari opzioni in Select2?

UPDATE: come notato nei commenti c'è una funzione find(), ma che ottiene solo gli <option> elementi originali, non le <li> elementi che select2 genera. Ecco quello che ho provato:

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

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

Answer 1

A partire dal Select2 4.0.1 (just released), è possibile trasferire le classi con l'opzione templateResult. è l'oggetto di dati viene visualizzato il primo parametro, e il secondo argomento è il contenitore che sarà visualizzato 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>

Answer 2

Se anche voi volete utilizzare il aggiungere la classe al selezionata gli articoli chiamano la stessa funzione da 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

Se si vuole fare questo per impostazione predefinita, ogni nuovo select2 copiare la definizione della classe da opzione per select2-elemento. Includere il codice dopo aver caricato select2.js

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