Usando diferentes colores para las opciones desplegables usando Select2

Question

Estoy usando un menú desplegable Select2 y me gustaría establecer diferentes colores en las opciones. Cambié con éxito todas las opciones a un color, pero quiero variar entre varias en función del valor. Tengo cerca de 1000 opciones (páginas en libros) y necesito marcar algunas de ellas (según un conjunto de páginas) como verde. ¿Puede proponer la forma de lograrlo?

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

Ejemplo: resultado esperado

Answer 1

Utilice nth-childen la optionetiqueta

<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

¡Resuelto! El principal problema fue que las opciones desplegables de selection2 se crean dinámicamente y no se genera ningún evento en ellas. Ese es el truco.

1. Marqué todas las páginas que se suponía que iban a cambiar de color agregando espacio.

2. Luego, en el evento relevante:

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

El temporizador coloca la función cambiando de color en el ciclo de eventos. Gracias a todos los que intentaron ayudarme.