カスタム属性でSelect2ドロップダウンのフォント色を変更できません

Question

現在、古いアプリでSelect2を使用しようとしています。私は正常に古いドロップダウンをアクティブにし、Select2ドロップダウンに変換することができます。すべて正常に動作します。プルダウンが表示され、関連する機能はまだ動作しています。しかし、私はもう少し進んだことをしようとしています。

古いドロップダウンでは、すべてのオプションにカスタム属性があります。

<option onlyslave="True" ...> ...</option> 

ここで、onlyslaveプロパティがtrueの場合、テキストの色を赤にします。それが偽であれば、それは黒のままでなければならない。私はすでにこれを使って、テキストを赤に設定する方法を知っています。

.select2-results { 
    color: red; 
} 

これは明らかにSelect2ドロップダウンのすべての結果を赤にします。私は属性を追加することを考えました[onlyslave = "true"]それを解決するだろうが、それはしません。次のスニペットは、スクリーンの後ろの '古い'ドロップダウンにFalseのオプションがあるという事実にもかかわらず、何も赤に変わらない&真実です。資本「真実」または「真実」はここで何の違いもありません。

.select2-results[onlyslave="true"] { 
    color: red; 
} 

これをどのように達成できますか？私はSelect2のドキュメントが少し不足していることがわかります。私は現在、Select2 4.0.5を使用していますが、ダウングレードできる可能性があります。

Answer 1

私は私のコメントで述べたように、あなたは、例えば、口座にonlyslave属性を取って、あなたの要素を構築するためにtemplateResultプロパティを使用する必要があります

HTML

<select> 
    <option onlyslave="True">Option 1</option> 
    <option onlyslave="False">Option 2</option> 
    <option onlyslave="False">Option 3</option> 
</select> 

CSS

.select2-results span[onlyslave="True"] { 
    color: red; 
} 

はJavaScript

function formatState (state) { 
    if(!state.element) return; 
    var os = $(state.element).attr('onlyslave'); 
    return $('<span onlyslave="' + os + '">' + state.text + '</span>'); 
} 

$(document).ready(function() { 
    $('select').select2({ 
     templateResult: formatState 
    }); 
}); 

Codepen例：https://codepen.io/anon/pen/gXByeK

Answer 2

ここにはworking fiddleがあります。これは、あなたが求めたことを達成する方法を示しています。前述の答えは、select2のtemplateResult機能を使用する必要があります。 Select2はオリジナルの選択とビルディングを隠し、カスタムバージョンを表示することで機能します。このカスタムバージョンには、元のselectの唯一のsls属性がありません。なぜあなたのcssセレクターがそれをターゲットにできないのですか？

HTML

<select class="js-example-basic-single" name="state"> 
    <option onlyslave="True">test</option> 
    <option>test 2</option> 
</select> 

はJavaScript

function formatState (state) { 
    if (!state.id) { 
    return state.text; 
    } 

    var $state 
    if(state.element.attributes.onlyslave && state.element.attributes.onlyslave.value == "True"){ 
    $state = $('<span class="redtext">'+ state.text+ '</span>'); 
    } 

else { 
    $state = $('<span>'+ state.text+ '</span>'); 
} 
    return $state; 
}; 


$('.js-example-basic-single').select2({ 
    templateResult: formatState 
});