Solved

Can you set color of select option selected?

Posted on 2008-10-29
3
5,627 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
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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

706 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now