Select2를 사용하여 드롭 다운 옵션에 다른 색상 사용

Question

Select2 드롭 다운을 사용하고 있으며 옵션에 다른 색상을 설정하고 싶습니다. 모든 옵션을 하나의 색상으로 성공적으로 변경했지만 값에 따라 여러 옵션을 변경하고 싶습니다. 1,000 개에 가까운 옵션 (책의 페이지)이 있고 그중 일부 (일부 페이지 세트 기준)를 녹색으로 표시해야합니다. 이를 달성하는 방법을 제안 하시겠습니까?

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

예 : 예상 결과

Answer 1

를 사용하여 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>

Answer 2

해결되었습니다! 주요 문제는 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);
   
    });
   

타이머는 이벤트 루프에 함수 변경 색상을 배치합니다. 도와 주신 모든 분들께 감사드립니다.