Utilisation de différentes couleurs pour les options de liste déroulante à l'aide de Select2

Aug 18 2020

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

DanMullin Aug 18 2020 at 21:40

Utilisez le nth-childsur 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>

Solo Aug 23 2020 at 17:59

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.

  1. J'ai marqué toutes les pages censées changer de couleur en ajoutant de l'espace.

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