Forum Moderators: open
#CODE
<select name="select" id="select1">
<option value="one" id="b1">1</option>
<option value="two" id="b2">2</option>
<option value="three" id="b3">3</option>
<option value="four" id="b4">4</option>
</select>
<script type="text/javascript">
var o = document.getElementById("select1");
function f1() {o.style.backgroundColor="red";}
function f2() {o.style.backgroundColor="green";}
function f3() {o.style.backgroundColor="blue";}
function f4() {o.style.backgroundColor="yellow";}
document.getElementById("b1").onclick = f1;
document.getElementById("b2").onclick = f2;
document.getElementById("b3").onclick = f3;
document.getElementById("b4").onclick = f4;
</script>
#/CODE
Sorry i am new to javascript and need a little help - many thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- doctype on one line -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<script type="text/javascript">
function highlight(form,selectObject,color) {
for (i=0;i<form.elements.length;i++) {
var obj = form.elements[i];
if (obj.type == 'select-one') {
if (obj.id==selectObject.id) {
selectObject.style.backgroundColor=color;
}
else { obj.style.backgroundColor='white'; }
}
}
}
</script>
</head>
<body>
<form action="">
<select name="select" id="select1" onFocus="highlight(this.form,this,'red');">
<option value="one" id="b1">1</option>
<option value="two" id="b2">2</option>
<option value="three" id="b3">3</option>
<option value="four" id="b4">4</option>
</select>
<select name="select" id="select2" onFocus="highlight(this.form,this,'green');">
<option value="one" id="b1">1</option>
<option value="two" id="b2">2</option>
<option value="three" id="b3">3</option>
<option value="four" id="b4">4</option>
</select>
</form>
</body>
</html>
Unfortunately I think our codes are quite different.
Mine currently uses the <option> id element to change the <select> background color.
So on one <select> tag you could have many colors, not just a single color per <select>.
The following code might show it a little better as I have left the style tags in also.
I am kind of guessing (just a guess) it is just the first 5 lines of javascript which need changing in to a function with the select id and option id being used in the function.
Sorry if it was php i wouldnt have a problem but i am a bit new to javascript.
#CODE
<style>
.none{background-color:#FFFFFF}
.optionRed{background-color:#FF0000}
.optionGreen{background-color:#00FF00}
.optionBlue{background-color:#0000FF}
.optionYellow{background-color:#FFFF00}
</style>
<form method="post" action="#" >
<select name="select1" id="select1">
<option value="one" id="b1" class="optionRed">1</option>
<option value="two" id="b2" class="optionGreen">2</option>
<option value="three" id="b3" class="optionBlue">3</option>
<option value="four" id="b4" class="optionYellow">4</option>
</select>
<select name="select2" id="select2">
<option value="A" id="b2" class="optionGreen">A</option>
<option value="B" id="b2" class="optionGreen">B</option>
<option value="C" id="b4" class="optionYellow">C</option>
<option value="D" id="b4" class="optionYellow">D</option>
</select>
<input type="submit" value="submit">
</form>
<script type="text/javascript">
var selectID = document.getElementById("select1");
document.getElementById("b1").onclick = f1;
document.getElementById("b2").onclick = f2;
document.getElementById("b3").onclick = f3;
document.getElementById("b4").onclick = f4;
function f1() {selectID.style.backgroundColor="red";}
function f2() {selectID.style.backgroundColor="green";}
function f3() {selectID.style.backgroundColor="blue";}
function f4() {selectID.style.backgroundColor="yellow";}
</script>
#/CODE
Thanks for any help.
