Jquery: choice of options and background color

Question

Hi Having this check box:

<select id="events">
    <option value="1" style="background-color:green;">Event 1</option>
    <option value="2" style="background-color:yellow;">Event 2</option>
    <option value="3" style="background-color:blue;">Event 3</option>
    <option value="4" style="background-color:red;">Event 4</option>
</select>

In the initial browser rendering version of this selection and every time the selection is done , I want the “events” of the selection to display the background color of the selected option.

How can this be achieved through jquery or through regular javascript?

Answer 1

//Alert color on initial page load
var bkg = $("#events option:selected").css("background-color");
    alert(bkg);

//Handle change event and alert color when selection is done
$(function(){
 $("#events").change(function() {
    var bkg = $("#events option:selected").css("background-color");
    alert(bkg);
 });
});

Answer 2

selected

$('#events').bind('change', function() {

   var bgc = $(this).find('option:selected').css('background-color');

});

Answer 3

:

$("#events").change(function() {
    $(this).css("backgroundColor",
      $(this).find(":selected").css("backgroundColor")
    );
}).change();

. , , IE. <select>, , (- ... ). , , , . , , - .

Answer 4

IE, option.

$(this).html($(this).html());