Select2'yi kullanarak açılır seçenekler için farklı renkler kullanma

Question

Bir Select2 açılır menüsü kullanıyorum ve seçeneklerde farklı renkler ayarlamak istiyorum. Tüm seçenekleri tek bir renge başarıyla değiştirdim, ancak değere göre birkaç seçenek arasında değişiklik yapmak istiyorum. 1000'e yakın seçeneğim var (kitaplardaki sayfalar) ve bazılarını (bazı sayfalara göre) yeşil olarak işaretlemem gerekiyor. Bunu başarmanın bir yolunu önerebilir misin?

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

Örnek: Beklenen sonuç

Answer 1

Kullanım nth-childüzerindeki optionetiketin

<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>

Answer 2

Çözüldü! Ana sorun, seçim2 açılır seçeneklerinin dinamik olarak oluşturulması ve üzerinde hiçbir olay oluşturulmamasıydı. İşin püf noktası bu.

1. Renk değiştirmesi gereken tüm sayfaları boşluk ekleyerek işaretledim.

2. Daha sonra ilgili olayda:

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

Zamanlayıcı, olaylar döngüsüne işlevin değişen rengini yerleştirir. Bana yardım etmeye çalışan herkese teşekkürler.