Colore di sfondo dell'opzione selezionata

Question

Sto scrivendo un menu a discesa con diverse opzioni e i loro colori. Ho colorato con successo lo sfondo di ciascuna opzione; tuttavia, una volta selezionato, il colore di sfondo non viene visualizzato.

C'è un modo per modificare questo comportamento? Esempio del mio HTML sottostante:

<select> 
    <option style="background-color: green">Successful</option> 
    <option style="background-color: orange">Process Failure</option> 
    <option style="background-color: purple">Abandoned</option> 
</select> 

o anche qui: http://jsfiddle.net/H8HVm/1/.

Grazie!

Answer 1

Ok, in modo da poter utilizzare jQuery per leggere il class del selezionato option quindi impostare che class come class del <select>. Ecco il codice, seguito da un violino ...

CSS

.green { 
    background-color: green; 
} 
.orange { 
    background-color: orange; 
} 
.pink { 
    background-color: pink; 
} 

Jquery

$("#color_me").change(function(){ 
    var color = $("option:selected", this).attr("class"); 
    $("#color_me").attr("class", color); 
}); 

HTML

<select id="color_me" class=""> 
    <option class="green">successful</option> 
    <option class="orange">process failure</option> 
    <option class="pink">abandoned</option> 
</select> 

Ecco il violino: http://jsfiddle.net/DrydenLong/3QUN6/

UPDATE

Per richiesta, Qui è una ripartizione del mio codice di cui sopra:

$("#color_me").change(function(){ 

Questa linea chiama la funzione quando l'elemento con il id di "color_me" è cambiato. cioè viene scelta un'opzione dalla lista di selezione.

var color = $("option:selected", this).attr("class"); 

Questo definisce la variabile color come ciò che la class della corrente selezionato option è. La variabile this si riferisce all'elemento DOM a cui si fa riferimento nella prima riga. Fondamentalmente, this assicura che stiamo ottenendo la classe dal <select> corretto, ovvero lo <select>, su cui abbiamo appena fatto clic.

$("#color_me").attr("class", color); 
}); 

Questa linea assegna la variabile color sopra definito come class dell'elemento con la id di #color_me.