Menggunakan warna berbeda untuk opsi dropdown menggunakan Select2

Question

Saya menggunakan drop-down Select2 , dan ingin menyetel warna berbeda pada opsi. Saya berhasil mengubah semua opsi menjadi satu warna, tetapi saya ingin memvariasikan di antara beberapa pilihan berdasarkan nilainya. Saya memiliki hampir 1000 opsi (halaman dalam buku) dan saya perlu menandai beberapa di antaranya (berdasarkan beberapa set halaman) sebagai hijau. Bolehkah Anda mengusulkan cara untuk mencapai ini?

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

Contoh: Hasil yang diharapkan

Answer 1

Gunakan nth-childpada optiontag

<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

Terpecahkan! Masalah utamanya adalah bahwa pilihan dropdown selection2 dibuat secara dinamis dan tidak ada event yang dibuat di situ. Itulah triknya.

1. Saya menandai semua halaman yang seharusnya berubah warna dengan menambahkan spasi.

2. Kemudian pada acara yang relevan:

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

Fungsi tempat pengatur waktu mengubah warna pada loop peristiwa. Terima kasih semua orang yang mencoba membantu saya.