<option>属性をselect2に渡すにはどうすればいいですか？

Question

私はSelect2 4.0を使用しています。私はオプションのリストを持っていますが、そのうちのいくつかは「削除」されています。私の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> 

そして、それは次のように初期化されます：SELECT2私はそのクラスを参照する方法が表示されない生成結果のHTMLコードに、しかし

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

。また、オプションでdata-deleted属性を試しましたが、運がありません。

私が見る限り唯一のことはtemplateResultオプションです。opt.element.classNameを確認できます。しかし、そこからselect2オプションにアクセスする方法はわかりません。とにかくそのコールバックは、私が欲しいものではないすべての単一の検索で実行されます。

Select2の特定のオプションのスタイルを変更する方法はありますか？

更新：コメントに記載されているように、find()関数がありますが、それは元の<option>要素のみを取得し、<li>要素は生成しません。ここに私が試したものです：

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

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

Answer 1

Selectセレクト4.0.1 (just released)のとして、あなたはtemplateResultオプションでクラスを転送することができます。最初のパラメータは、データオブジェクトが表示されている、2番目の引数は、それが中に表示されるコンテナです。

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

あなたはまた、選択したクラスを追加使用したい場合アイテムは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はすべて、クラス定義を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); 
    } 
}