Change SELECT style based on OPTION

http://stackoverflow.com/q/16344583/1454806

HTML

<select>
  <option value="foo" selected="selected">Foo!</option>
  <option value="bar">Bar!</option>
</select>

<select>
  <option value="a">Test a</option>
  <option value="b" selected="selected">Test b</option>
</select>

CSS

select,
option {
  background: #fff;
}

select.foo {
  background: red;
}

select.bar {
  background: green;
}

select.a {
  background: blue;
}

select.b {
  background: yellow;
}

JavaScript

$('select').attr('class', '').addClass($('select').children(':selected').val());

$('select').on('change', function(ev) {
  $(this).attr('class', '').addClass($(this).children(':selected').val());
});