Here is the HTML code I am working with:
<select
th:field="*{status.health}"
th:value="${status.health}"
th:class="health_color"
th:name="status_health">
<option value="-1">Select Health</option>
<option th:class="health_color" th:value="green" th:text="green"></option>
<option th:class="health_color" th:value="yellow" th:text="yellow"></option>
<option th:class="health_color" th:value="red" th:text="red"></option>
</select>
Additionally, I have included the following JavaScript snippet:
$('.health_color').each(function() {
if ($(this).text() == 'red') {
$(this).css('background-color', '#ff5050');
} else if ($(this).text() == 'yellow') {
$(this).css('background-color', '#ffd24d')
} else if ($(this).text() == 'green') {
$(this).css('background-color', '#80ffaa')
}
});
All elements on the page are styled correctly except for the select box itself. Can someone please advise on how to rectify this issue?
Thank you.