Coloring background of select list page items

Question

I'm currently trying to create a form within Oracle Apex where the form entries (all select lists) change color based on what data the entry holds. So far I have a dynamic action that triggers when the page loads that executes the following JS code:

const pageItems = ["P60_C011", "P60_C012", ....., "P60_C049", "P60_C050"]

for (let i = 0; i < pageItems.length; i++){
    if ($v(pageItems[i]) == "Yes"){
        $("#" + pageItems[i]).css("background-color", "#90EE90");
    }

    else if ($v(pageItems[i]) == "No" || $v(pageItems[i]) == "N/A" || $v(pageItems[i]) == "In Progress"){
        $("#" + pageItems[i]).css("background-color", "#F08080");
    }

    else if ($v(pageItems[i]) == "") {
        $("#" + pageItems[i]).css("background-color", "transparent");
    }
}

This works great except for a few niche interactions. For starters the pre-text and post-text background colors are unchanged (they are displayed as blocks within the template options for the page items). But more importantly, whenever you click on the item (to change its value via a select list), the color returns to the default. I'd really like the color to remain whatever the dynamic action asks it to be.

Additionally, I'd like for the background to be a different color entirely if the value contained in the page item is changed, but it has not yet been submitted to the form's corresponding table. I have a few ideas for this but they all seem very tedious and involve separate dynamic actions or code blocks for each of the 40 entries and a more simple solution would be much appreciated.

Answer 1

I wouldn't use a dynamic action on this. Instead define a function on page load and use jquery delegated binding to capture any changes:

Function and Global Variable Declaration:

function colorSelectLists(){
    const pageItems = ["P185_C1","P185_C2"]
    
    for (let i = 0; i < pageItems.length; i++){
        if ($v(pageItems[i]) == "Y"){
            $("#" + pageItems[i]).css("background-color", "#90EE90");
        }
    
        else if ($v(pageItems[i]) == "N" || $v(pageItems[i]) == "N/A" || $v(pageItems[i]) == "In Progress"){
            $("#" + pageItems[i]).css("background-color", "#F08080");
        }
    
        else if ($v(pageItems[i]) == "") {
            $("#" + pageItems[i]).css("background-color", "transparent");
        }
    }    
}

Execute when Page Loads

//initial load
colorSelectLists();
//listener for any changes to adjust the color
$('#P185_C1, #P185_C2').on('change',function(){
    colorSelectLists();
});

note that the jquery selector needs to match exactly a comma separated list of ids enclosed in single quotes.