Solved

Can you set color of select option selected?

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
These days socially coordinated efforts have turned into a critical requirement for enterprises.
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)

920 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

16 Experts available now in Live!

Get 1:1 Help Now