Select box to highlight choice deviation I have a select box that in default state looks as default (white, etc)
but when I select a different value, I want the entire table row to highlight in yellow.

I did this, but I want to make it better and more concise and more efficient.  Can you help?

Also I will have several such boxes, not just one.  Feel free to change/add/remove identifiers, I am looking for a better solution overall.



$(document).ready(function() {


  $("#closedRow").on('change', function() {
    if ($("#closedRow").val() != 0)
      $("#trRow").css('background-color', 'yellow');
    else
      $("#trRow").css('background-color', 'white');
  })
  
    $("#serviceRow").on('change', function() {
    if ($("#serviceRow").val() != 0)
      $("#trRow2").css('background-color', 'yellow');
    else
      $("#trRow2").css('background-color', 'white');

  })
})
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;table&gt;
  &lt;tr id="trRow"&gt;
    &lt;td&gt;Closed:&lt;/td&gt;
    &lt;td&gt;&lt;select name="closed" id="closedRow"&gt;
            &lt;option value="0"&gt;Show All&lt;/option&gt;
            &lt;option value="1"&gt;Hide Closed&lt;/option&gt;
        &lt;/select&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr id="trRow2"&gt;
    &lt;td&gt;Service:&lt;/td&gt;
    &lt;td&gt;&lt;select name="service" id="serviceRow"&gt;
            &lt;option value="0"&gt;Show All&lt;/option&gt;
            &lt;option value="1"&gt;Hide Service&lt;/option&gt;
            &lt;option value="2"&gt;Another Service&lt;/option&gt;
        &lt;/select&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;table&gt;
Maybe use a generic function to set the css on change if you don't have anything other than colors. It also helps with dry.

function evt_highlightRow() {
    row = $(this).parent().parent()
    if ($(this).val() != 0)
      row.css('background-color', 'yellow');
    else
      row.css('background-color', 'white');
}


Then use it like so:

$(some_target_nested_2_deep).on('change', evt_highlightRow);

// such as your select
$('select').on('change', evt_highlightRow);
// or a generic class applied to inputs in the same general location
$('.highlightRowTarget').on('change', evt_highlightRow);


I created the example here: https://codepen.io/anon/pen/bWraNB