Change color of select box based on option chosen

rmagan · Oct 31, 2003

I would like to change the color of a select box based on what option they choose. In the example below, I would change the color to red, yellow or green. Is this possible?

<html>
<head>
</head>

<body>
<SELECT name="p_param1">
<OPTION value=RED>STOP
<OPTION value=YELLOW>CAUTION
<OPTION value=GREEN>GO

</SELECT>

</body>
</html>

mwolf00 · Oct 31, 2003

<html>
<head>
<script>
function getColor(){
theSelect = document.getElementById("p_param1&quot

theColor = theSelect.options[theSelect.selectedIndex].value
theSelect.style.backgroundColor = theColor
}
</script>
</head>

<body>
<SELECT id="p_param1" onChange="getColor()">
<OPTION value=RED>STOP
<OPTION value=YELLOW>CAUTION
<OPTION value=GREEN>GO

</SELECT>

</body>
</html>

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook (No, I'm not Rick)

theboyhope · Oct 31, 2003

Just this function:

Code:

function changeColour( el ) {

	el.style.backgroundColor = el.options[el.options.selectedIndex].value;
}

... called like this from your select ...

Code:

<SELECT name=&quot;p_param1&quot; onchange=&quot;changeColour( this );&quot;>

theboyhope · Oct 31, 2003

(LOL - Wolfy, even when I hit Refresh to check for new posts just before I post my own, somehow I end up doing this all the time.)

rmagan · Oct 31, 2003

excellent. I love this forum.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Change color of select box based on option chosen

rmagan

Programmer

mwolf00

Programmer

theboyhope

IS-IT--Management

theboyhope

IS-IT--Management

rmagan

Programmer

Similar threads

Part and Inventory Search

Sponsor