2017-12-26 9 views
0

私はjQueryプラグインselect2(V4)を使用していると私はオプションが選択された境界線の色変更したい - このクラスには次のようになります。Select2でオプションが選択されたことを知る方法はありますか?

.select2-selection--single 

しかしクラスの変更等を見てオプションが選択されても、それはCSS内でこれを知るための頑丈な方法がないと思われます。私が本当に気づいた唯一の事は、メインのselect2コンテナにselect2-container--belowクラスを追加したことですが、これを使うのは賢明ではないと思います。

これを達成する簡単な方法はありますか、この機能を自分で追加する必要がありますか?

+0

プラグインAPIを使用すると、テンプレートドロップダウンと選択(https://select2.org/dropdownを参照)の両方を確認しまし – charlietfl

+0

にフックするイベントのすべての種類を持っていますか? – beaver

+0

しかし、あなたを助けることができる場合、私の謎を確認してください:https://jsfiddle.net/beaver71/0573357j/ – beaver

答えて

1

テンプレート化とSelect2 CSSのカスタマイズの両方を使用して目標を達成できます。

li[aria-selected="true"] { 
    border: 1px solid red !important; 
} 

使用Dropdown templateは、ドロップダウンリストの項目をフォーマットするとSelection templateは、選択した要素をフォーマットする:

たとえば、ドロップダウンリストで選択した要素にカスタムスタイルを適用します。ここで

のコードサンプルでは、​​これらの技術を使用している:https://jsfiddle.net/beaver71/0573357j/

+0

技術をありがとう。前にselect2でテンプレートを使っていましたが、 'select2:select'イベントを聞いてから境界線の色を変更しました。 – Brett

+0

'templateResult'関数でコンテナのスタイルを変更することもできます:' function formatStateDropdown(state、container) '。フィドルが更新されました。 – beaver

関連する問題