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ドロップダウンオプションが動的に作成され、イベントが生成されないことでした。それがトリックです。

  1. スペースを追加して、色が変わるはずのすべてのページにマークを付けました。

  2. 次に、関連するイベントについて:

     // 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);
    
     });
    

タイマーは、イベントループに色を変える関数を配置します。助けてくれたみんなに感謝します。