Использование разных цветов для раскрывающихся опций с помощью Select2

Aug 18 2020

Я использую раскрывающийся список Select2 и хочу установить разные цвета для параметров. Я успешно изменил все параметры на один цвет, но я хочу варьировать между несколькими в зависимости от значения. У меня около 1000 вариантов (страниц в книгах), и мне нужно отметить некоторые из них (на основе некоторого набора страниц) как зеленые. Не могли бы вы предложить способ достижения этого?

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

Пример: ожидаемый результат

Ответы

DanMullin Aug 18 2020 at 21:40

Используйте nth-childна optionтеге

<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

Решено! Основная проблема заключалась в том, что выпадающие опции selection2 создаются динамически и для них не генерируется никаких событий. Это уловка.

  1. Я отметил все страницы, которые должны были изменить цвет, добавив пробела.

  2. Затем на соответствующем мероприятии:

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

Таймер помещает функцию изменения цвета в цикл событий. Спасибо всем, кто пытался помочь мне.