Try to change SELECT color

Try to change SELECT color

Hello,

I'm just starting using JQUERY  so I  excuse myself whether my question is too much  trivial. The following code is just a sample test.

I'm trying to change the color of a SELECT control  after selecting one of its options.  For example,  when I select "red"   I'd like to change   the SELECT  control to "red". But   I do not know how to do.

However,  I think I have first to get the selected option properties.  That is what I'm trying to achieve.
It is OK for value and text, but not for RGB. I was expecting to receive rgb(255,0,0) instead of getting something else which is obviouly wrong. .

Thanks a lot in advance for any help (and sorry for my bad English).

Gege 
 
  1. <html><head>
  2. <meta http-equiv="Content-type" content="text/html; charset=Windows-1252"/>
  3. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function()
  6. {
  7.     $("#S1").mouseup(function()
  8.     {
  9.          var txt = $("#S1 option:selected").text();
  10.         var val = $("#S1 option:selected").val();
  11.        var rgb = $("#S1 option:selected").css('backgroundColor');
  12.        alert("Text = " + txt + "  Value =" + val + " --> " + rgb);
  13.     });
  14. });
  15. </script></head><body>
  16. <center><p><h1>Test JQUERY
  17. <h2>
  18. <form><select id='S1' style='background-color:#25F0FF;'>
  19. <option value='0' style='background-color:#25F0FF;'  >Light Blue</option>
  20. <option value='1' style='background-color:#0000FF;'  >Blue/option>
  21. <option value='2' style='background-color:#FF0000;'   >red</option>
  22. <option value='3' style='background-color:#00FF00;'   >Green</option>
  23. <option value='4' style='background-color:#000000;'   >Black</option>
  24. </select>
  25. </body></html>