選択2の選択された項目にアイコンを表示する方法

Question

<options>を持つSELECT2プラグインを持っています。右側にフォンタウソースアイコンを追加しています。

問題は、アイコンを持つアイテムを選択すると、ドロップダウンが閉じられたときに選択された現在のアイテムにアイコンが表示されません。どのように私はそれを解決することができますか？フォーマット関数が間違っている可能性がありますか？

これはあなたが試すことができるJSfiddleです： http://jsfiddle.net/uanlj/18/

js

$("#mysel").select2({
    width: "100%",
    formatResult: function(referencia) {
        if (!referencia.id) return referencia.text; // optgroup

        if ($(referencia.element).data('active') == "1") {
            return referencia.text + "<i class='fa fa-check-circle'></i>";
        } else {
            return referencia.text;
        }
    }
});

.

css

body {
    padding: 20px;
}

.fa-check-circle{
    float: right;
    position: relative;
    line-height: 20px;
}

.

html

<select id="mysel">
    <optgroup label="First group">
        <option value="0" data-active="1">Hello</option>
        <option value="1" data-active="0">Stack</option>
    </optgroup>
    <optgroup label="Second group">
        <option value="2" data-active="1">Overflow</option>
        <option value="3" data-active="1">Friends</option>
    </optgroup>
</select>

.

Answer 1

選択した要素の外観を変更したい場合は、formatSelectionを使用する必要があります。

formatSelection: function (referencia) {
    if ($(referencia.element).data('active') == "1") {
        return referencia.text + "<i class='fa fa-check-circle'></i>";
    } else {
        return referencia.text;
    }
}

.

更新されたフィドル： http://jsfiddle.net/uanlj/22/