Utilizzo di colori diversi per le opzioni a discesa utilizzando Select2

Aug 18 2020

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

DanMullin Aug 18 2020 at 21:40

Usa nth-childil 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>

Solo Aug 23 2020 at 17:59

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.

  1. Ho contrassegnato tutte le pagine che avrebbero dovuto cambiare colore aggiungendo spazio.

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