Apply javascript to multiple items by class

Question

I have some select boxes that I want to have color coded. There are three per row, by 18 rows.

It is easy to color code the drop down, but I need to use Javascript to color code the display of the selected item. I have cobbled together a script that does it, but only for the first one on the page .. and it changes ALL of them to the same color. I need the script to apply to each one independently. I am very much a beginner at Javascript. I have figured out that I need to use the var i thing, but I can't get it to work.

And my javascript is:

    //**** Script to Color the Dropdowns
$(document).ready(function () {
    colorSelect(); // call this first so we start out with the correct Color
    // this will call our function every time the selection value of the field changes
    $(".selectcondition").change(function () {
        colorSelect();
    });

});
// this changes the color of the selected item
function colorSelect() {
    if ($(".selectcondition").val() === "Excellent"){
        $('.selectcondition').css('color','#5cb85c');
    }else if($(".selectcondition").val() === "Good"){
        $('.selectcondition').css('color','#0275d8');
    }else if($(".selectcondition").val() === "Fair"){
        $('.selectcondition').css('color','#f0ad4e');
    }else {
        $('.selectcondition').css('color','#FF0000');
    }
}

CertainPerformance · Accepted Answer

.css will set the CSS of all matching elements. Iterate over the selects with each instead, and get a reference to the current one you're iterating over with this.

You can also make the code much more concise by using an object indexed by option values instead of repetitive if/else statements:

function colorSelect() {
  const colors = {
    Excellent: '#5cb85c',
    Good: '#0275d8',
    Fair: '#f0ad4e',
    Poor: '#FF0000'
  }
  $(".selectcondition").each(function() {
    $(this).css('color', colors[this.value]);
  });
}
colorSelect();
$(".selectcondition").change(colorSelect);

Apply javascript to multiple items by class

Answers (1)

Related Questions