Conditional Branching Using Filter

I'm using multiple jQuery filter functions to affect the background color of select objects based on the selected option and it works, but it seems bulky/redundant. Does anyone know how these filter statements could be simplified/combined? I have a JSFiddle here.

```





$(document).ready(function(){
/ Add 'Contracted' title and change background to green (if not already red) for 'C' services /
$("select").parent()
.filter(function(index){
return $(this).find('option:selected').text() == 'C'; })
.attr('title','Contracted')
.addClass(function(index,currentClass) {
var addedClass;
if ( currentClass != "cellcolorred" )
{ addedClass = "cellcolorgreen"; }
return addedClass;
});
/ Add 'Available' title and change background to green (if not already red) for 'A' services /
$("select").parent()
.filter(function(index){
return $(this).find('option:selected').text() == 'A'; })
.attr('title','Available')
.addClass(function(index,currentClass) {
var addedClass;
if ( currentClass != "cellcolorred" )
{ addedClass = "cellcolorgreen"; }
return addedClass;
});
/ Add 'Expensive' title and change background to orange (if not already red) for 'E' services /
$("select").parent()
.filter(function(index){
return $(this).find('option:selected').text() == 'E'; })
.attr('title','Expensive')
.addClass(function(index,currentClass) {
var addedClass;
if ( currentClass != "cellcolorred" )
{ addedClass = "cellcolororange"; }
return addedClass;
});
/ Add 'Do Not Use' title and change background to pink for 'D' services /
$("select").parent()
.filter(function(index){
return $(this).find('option:selected').text() == 'D'; })
.attr('title','Do Not Use')
.addClass("cellcolorpink");
/ Add 'No Service' title to empty services /
$("select").parent()
.filter(function(in

You seem to overuse !important in your CSS. This is very bad, but I didn't change anything about this.

Your script is extremely repetitive, too. I tried my hand at DRYing it and I got:

$(document).ready(function () {
    var serviceStatuses = {
        'A': {
            title: "Available",
            color: "green"
        },
        'C': {
            title: "Contracted",
            color: "green"
        },
        'D': {
            title: "Do Not Use",
            color: "pink",
            override: true
        },
        'E': {
            title: "Expensive",
            color: "orange"
        }
    };
    $("select").each(function() {
        var $t = $(this);
        var $td = $t.parent();
        var status = serviceStatuses[$t.val()] || {
            title: "No Service",
            color: "Default"
        };
        $td.attr("title", status.title).toggleClass("cellcolor" + status.color, status.override || !$td.hasClass("cellcolorred"));
    });
});

Here's a fiddle demonstrating it. I took the liberty of adding another row with cellcolorred on every cell to demonstrate that D will still override the selection.

StackExchange Code Review Q#56484, answer score: 5