Utilizzo di colori diversi per le opzioni a discesa utilizzando Select2
Sto utilizzando un menu a discesa Select2 e vorrei impostare colori diversi nelle opzioni. Ho cambiato con successo tutte le opzioni in un colore, ma voglio variare tra diverse in base al valore. Ho quasi 1000 opzioni (pagine nei libri) e devo contrassegnare alcune di esse (in base a un insieme di pagine) come verdi. Puoi proporre il modo per raggiungere questo obiettivo?
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;
}
Esempio: risultato previsto
Risposte
Usa nth-child
il option
tag
<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>
Risolto! Il problema principale era che le opzioni a discesa di selezione2 vengono create dinamicamente e su di esse non viene generato alcun evento. Questo è il trucco.
Ho contrassegnato tutte le pagine che avrebbero dovuto cambiare colore aggiungendo spazio.
Quindi sull'evento pertinente:
// 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); });
Il timer inserisce la funzione che cambia colore nel ciclo degli eventi. Grazie a tutti coloro che hanno provato ad aiutarmi.