Change SELECT style based on OPTION

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

by Snj

HTML

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

CSS

select, option { background: #fff; }
select, option:active { background-color: yellow !important; }
select.foo, option[value="foo"] { background: red; }
select.bar, option[value="bar"] { background: green; }

JavaScript

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