Change selection class based on selected option class

Question

I have a page containing many <select> elements. What I'm trying to achieve is to make sure that if the <select> of the selected <option> has a class called italics, then <select> then the italic class is added (i.e. jQuery.addClass('italic')). If this is not the case, then the italic class is removed from the <select> to ensure the other <option> elements are displayed correctly (i.e. jQuery.removeClass('italic')).

What I notice in most of my attempts is that either all <select> have an italic class, or that the italic class is not deleted accordingly.

Since I'm not sure that my choice in selectors and callback logic is particularly good or good in this case (since I frustratedly tried to get it to work), I decided not to include the code that I used in the previous attempt. Instead, refer to this small example of HTML and CSS:

.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>

, , CSS- <select> <option> . - J2EE Firefox .

Answer 1

, "foo", .

$("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

, , - :

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

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

, , . . mousedown . , , . :

• , . .

, select ( jQuery , ), .

Answer 3

nemisj ( typo 'esle' 'else') - CSS, :

select.italic {
    font-style:italic;
}

select option {
    font-style:normal;
}    

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

, , . , , font-style:normal;, option.italic font-style:italic; .

, : http://www.spookandpuff.com/examples/selectStyles.html