Utilisation de différentes couleurs pour les options de liste déroulante à l'aide de Select2
J'utilise un menu déroulant Select2 et j'aimerais définir différentes couleurs sur les options. J'ai réussi à changer toutes les options en une seule couleur, mais je veux varier entre plusieurs en fonction de la valeur. J'ai près de 1000 options (pages dans les livres) et je dois en marquer certaines (sur la base d'un ensemble de pages) comme vertes. Pouvez-vous proposer le moyen d'y parvenir?
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;
}
Exemple: résultat attendu
Réponses
Utilisez le nth-child
sur l' option
étiquette
<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>
Résolu! Le principal problème était que les options de liste déroulante selection2 sont créées dynamiquement et qu'aucun événement n'est généré dessus. Voilà le truc.
J'ai marqué toutes les pages censées changer de couleur en ajoutant de l'espace.
Puis sur événement pertinent:
// 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); });
La minuterie place la couleur changeante de fonction sur la boucle d'événements. Merci à tous ceux qui ont essayé de m'aider.