Solved

Can you set color of select option selected?

Posted on 2008-10-29
3
5,633 Views
Last Modified: 2010-04-21
Hi

Okay.  Have a select box listing colors.  Each option shows the color according to name for each in the drop down.  You then select a color, say red.  Red is returned to the select input box, but it is white background, not red.  

I know I can use styles to control the background color of the select box itself as well as the options, but how to set it dynamically to whatever color the user selects.  I could do this with AJAX, but that seems like it would be pounding a nail with a bulldozer.  

I attached a sample program to play with.  I tried setting style in select tag with background-color set to btnclr, but no go.  But that has to be on the right track...

Any help, pointers, etc would be greatly appreciated for this little problem...

Owen

<html>
<head>
</head>
<body>
   <div align="center">
      <select name="btnclr" id="btnclr">
         <option value ="0" SELECTED>Choose a color</option>
         <option style="background-color:red; color:white;" value ="Red">Red</option>
         <option style="background-color:blue; color:white;" value ="Blue">Blue</option>
         <option style="background-color:green; color:white;" value ="Green">Green</option>
      </select>
   </div>
</body>
</html>

Open in new window

0
Comment
Question by:owenparker
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 16

Accepted Solution

by:
sh0e earned 500 total points
ID: 22837976
There may be a way to do this in pure CSS styles with some of the new stuff in CSS3.

<html>
<head>
<script>
window.onload=function(){
    document.getElementById('btnclr').onchange = function(){
        var btnclr = document.getElementById('btnclr');
        btnclr.style.backgroundColor = btnclr[btnclr.selectedIndex].style.backgroundColor;
        btnclr.style.color = btnclr[btnclr.selectedIndex].style.color;
 
    }
};
</script>
</head>
<body>
   <div align="center">
      <select name="btnclr" id="btnclr">
         <option value ="0" style="background-color:white;" SELECTED>Choose a color</option>
         <option style="background-color:red; color:white;" value ="Red">Red</option>
         <option style="background-color:blue; color:white;" value ="Blue">Blue</option>
         <option style="background-color:green; color:white;" value ="Green">Green</option>
      </select>
   </div>
</body>
</html>

Open in new window

0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22838070
Except for the initial capital on the colors, this seems very easy to do --

 btnclr[btnclr.selectedIndex].style.backgroundColor = btnclr[btnclr.selectedIndex].value;

i.e. you are using the value of the selected index (the name) to set the BG color style of the selected.

Try it and see if the caps makes a difference.
0
 

Author Closing Comment

by:owenparker
ID: 31511543
Answer was complete and worked like a charm.  Got my solution and learned something too...
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Jquery 7 28
How do use '  ' within this code? 4 24
How to show popup no matter what a user clicks on navigation wise 10 30
Slush on text 2 9
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
3 proven steps to speed up Magento powered sites. The article focus is on optimizing time to first byte (TTFB), full page caching and configuring server for optimal performance.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

735 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question