Select2を使用したドロップダウンオプションに異なる色を使用する
Aug 18 2020
Select2ドロップダウンを使用していますが、オプションに異なる色を設定したいと思います。すべてのオプションを1つの色に正常に変更しましたが、値に基づいて複数のオプションを変更したいと思います。1000近くのオプション(本のページ)があり、それらのいくつか(いくつかのページのセットに基づく)を緑色としてマークする必要があります。これを達成する方法を提案してもらえますか?
HTML
<label for="add-coord-page">P: </label>
<select class="select2" id="add-coord-page" name="pages" style="width:60px"></select>
CSS
#select2-add-coord-page-results {
color: red;
}
例:期待される結果
回答
DanMullin Aug 18 2020 at 21:40
使用nth-child
上のoption
タグ
<style>
option:nth-child(odd) {
color: red;
}
option:nth-child(even) {
color: green;
}
</style>
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
<option>Option 6</option>
</select>
Solo Aug 23 2020 at 17:59
解決しました!主な問題は、selection2ドロップダウンオプションが動的に作成され、イベントが生成されないことでした。それがトリックです。
スペースを追加して、色が変わるはずのすべてのページにマークを付けました。
次に、関連するイベントについて:
// Set colors of pages containing images $('#add-coord-page').on('select2:open', function (e) { setTimeout(function () { $('.select2-results__option:contains(" ")').css('color', SUCCESS_COLOR); }, 100); });
タイマーは、イベントループに色を変える関数を配置します。助けてくれたみんなに感謝します。