การใช้สีที่แตกต่างกันสำหรับตัวเลือกแบบเลื่อนลงโดยใช้ 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);
   
    });
   

ตัวจับเวลาจะทำหน้าที่เปลี่ยนสีในลูปเหตุการณ์ ขอบคุณทุกคนที่พยายามช่วยฉัน