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.
<head>
<!-- Load minimum jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Load functions -->
<script type="text/javascript">
<!-- jQuery Functions -->
$(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(index){
return $(this).find('option:selected').text() == ''; })
.attr('title','No Service');
});
</script>
<style type="text/css">
/* body */
body {
border: 0;
margin: 0;
padding: 0;
background-color: #A3AFC0;
font-family: Verdana, Geneva, Arial, sans-serif;
}
select::-ms-expand { display: none; }
select {
appearance: none;
-moz-appearance: window;
-webkit-appearance: none;
border-style: none;
background: none;
color: inherit;
width: inherit;
height: 100%;
vertical-align: middle;
font: inherit;
font-size: 13px;
text-indent: 11.5px;
} /* Select Cells */
tbody {
border-bottom-width: 2px;
border-bottom-style: solid;
background-color: #FAFAFA;
}
tbody:last-of-type { border-bottom-width: 1px; }
tbody:nth-child(even) { background-color: #E1E1E1; }
tbody:hover td[rowspan], tr:hover td { background-color: #FF0; }
td {
border-style: solid;
border-color: inherit;
}
/* tfoot */
tfoot {
border-width: 1px;
font-weight: bold;
background-color: #E1E1E1;
}
/* Classes */
/* table */
.tablesorter {
table-layout: fixed;
font-size: 11px;
border-collapse: collapse;
border-spacing: 0;
border-color: #6E7984;
}
/* header */
.tablesorter th,
.tablesorter thead td {
height: 24px;
text-shadow: 0 0 4px #FFF;
text-align: center;
color: #000;
font-size: 11px;
background-color: #22A5C9 !important;
padding: 0;
}
/* tbody */
.tablesorter td {
text-align: center;
width: 33.5px;
}
.cellcolorred {
font-weight:bold;
color: #FFF;
background-color: #F00 !important;
}
.cellcolorgreen { background-color: #CFC !important; }
.cellcolororange { background-color: #FC9 !important; }
.cellcolorpink { background-color: #FCC !important; }
</style>
</head>
<!-- Body -->
<body>
<!-- Table -->
<table border="1" class="tablesorter" id="table-1">
<!-- Table Header -->
<thead>
<tr>
<td>ID</td>
<td>Alarm</td>
<td>Bflow</td>
<td>Burg</td>
<td>ELt</td>
<td>Eng</td>
</tr>
</thead>
<!-- Table Footer -->
<tfoot>
<tr>
<td colspan='100%'>1 Location</td>
</tr>
</tfoot>
<!-- Table Body -->
<tbody>
<tr id="1">
<td>AL08960</td>
<td id="Alarm">
<select>
<option selected>C</option>
<option>A</option>
<option>E</option>
<option disabled>-</option>
<option>D</option>
<option></option>
</select>
</td>
<td id="Bflow">
<select>
<option>C</option>
<option selected>A</option>
<option>E</option>
<option disabled>-</option>
<option>D</option>
<option></option>
</select>
</td>
<td id="Burg">
<select>
<option>C</option>
<option>A</option>
<option>E</option>
<option disabled>-</option>
<option>D</option>
<option selected></option>
</select>
</td>
<td id="ELt">
<select>
<option>C</option>
<option>A</option>
<option selected>E</option>
<option disabled>-</option>
<option>D</option>
<option></option>
</select>
</td>
<td id="Eng">
<select>
<option>C</option>
<option>A</option>
<option>E</option>
<option disabled>-</option>
<option selected>D</option>
<option></option>
</select>
</td>
</tr>
</tbody>
</table>
<table id="header-fixed"></table>
</body>