Change SELECT style based on OPTION

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

by Emmanuel Garcia

HTML

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

<span class="billing_room_field">Room Service</span>
<span id="billing_chair_field">Pool Bar</span>

CSS

select, option { background: #fff; }
select.foo, option[value="foo"].billing_room_field{ display: none; }
select.bar, option[value="bar"] { background: green; }

JavaScript

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