Change select's class based on selected option's class

Question

I have a page that contains numerous <select> elements. What I'm trying to achieve is to ensure that if a <select>'s selected <option> has a class called italic, then the <select> then has the italic class added (i.e. jQuery.addClass('italic')). If it doesn't, then the italic class is removed from the <select> to ensure other <option> elements are displayed correctly (i.e. jQuery.removeClass('italic')).

What I'm noticing with most of my attempts is that either all the <select> have the italic class or that the italic class isn't being removed accordingly.

Since I'm unsure my choice in selectors and callback logic are particularly sound or good practice in this instance (as I've been frustratingly trying to make it work) I've decided not to include the code I used in previous attempts. Instead, refer to this small HTML & CSS example:

.italic {
    font-style: italic;
}

<select id="foo" name="foo" size="1">
  <option value="NA" selected="selected"> - Select - </option>
  <option value="1">Bar</option>
  <option value="2">Fu</option>
  <option value="3">Baz</option>
</select>

Also, I am aware that not all browsers support CSS styling of <select> and <option>. The related J2EE web application will only ever be accessed via Firefox under a controlled environment.

Answer 1

In case user changes option in your select "foo", function will apply or remove italic based on the selected option.

$("select").change(function(e) {
    var select = e.target;
    var option = select.options[select.selectedIndex];
    if ($(option).hasClass('italic')) {
        $(select).addClass('italic');
    } else {
        $(select).removeClass('italic');
    }
});

Answer 2

The best you can do is something like this:

$("select").change(function() {
    if ($("select option:selected").hasClass('italic')) {
        $("select").addClass('italic');
    }
    else {
        $("select").removeClass('italic');
    }
});

$("select").mousedown(function() {
    $("select").removeClass('italic');
});

As you've said applying the class to the select applies it the whole control and not just to the text box. There is nothing you can do about this. What I suggest is to capture the mousedown event and remove the styling. This way when you look at the options, your styles will appear. This has two disadvantages:

• While selecting the text box will not appear with italic fonts
• If you use the keyboard to select, this won't work. You need to process more event for this.

If this is too important to you, I recommend that you use a custom made select control (implemented using jQuery and an unordered list or a table for example) over which you could control the whole appearance.

Answer 3

nemisj's answer handles the behaviour perfectly (except for the typo 'esle' instead of 'else') - you just need some better CSS to finish it:

select.italic {
    font-style:italic;
}

select option {
    font-style:normal;
}    

select option.italic {
  font-style:italic;
}

The issue with the styling is that options will take on the styling on their parent select, unless otherwise specified. So, specifically overriding the default option with font-style:normal; then restyling option.italic with font-style:italic; will do the trick.

Here's a test page showing it working with multiple selects: http://www.spookandpuff.com/examples/selectStyles.html