Использование разных цветов для раскрывающихся опций с помощью Select2
Я использую раскрывающийся список 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;
}
Пример: ожидаемый результат
Ответы
Используйте 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>
Решено! Основная проблема заключалась в том, что выпадающие опции selection2 создаются динамически и для них не генерируется никаких событий. Это уловка.
Я отметил все страницы, которые должны были изменить цвет, добавив пробела.
Затем на соответствующем мероприятии:
// 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); });
Таймер помещает функцию изменения цвета в цикл событий. Спасибо всем, кто пытался помочь мне.