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!
-
Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
set selected item color 2
- Thread starter zfang
- Start date
- Thread starter
- #3
-
1
- #4
BillyRayPreachersSon
Programmer
Something like this:
Code:
<html>
<head>
<script type="text/javascript">
<!--
function highlightSelected(selObj, nonSelCol, selCol)
{
for (var loop=0; loop<selObj.options.length; loop++)
selObj.options[loop].style.backgroundColor = (loop != selObj.selectedIndex) ? nonSelCol : selCol;
}
//-->
</script>
</head>
<body>
<form>
<select onchange="highlightSelected(this, '#FFFFFF', '#FF0000');">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<select onchange="highlightSelected(this, '#FFFFFF', '#00FF00');">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</form>
</body>
</html>I've given two different select boxes to show you that it's quite portable.
All you do is place this:
Code:
onchange="highlightSelected(this, '#FFFFFF', '#00FF00');In your select box, where the second paramater is the "unselected" colour you'd like, and the third is the "selected" colour you'd like... And that's about all there is to it!
Hope this helps,
Dan
- Thread starter
- #5
Hi, Dan:
Thanks for your reply. I tried out your code. The color of the selected item is still the default color. It seems that the background color set in your code is overlayed by the default color, which is kind of gray/blue. Here is what I observed.
The default color is shown on a item,say item 1, I selected. Now, I press
mouse on another item,say item 2, the color of the previously selected item, item 1, changed to the color of the selected item color, which is defined in the code(e.g., red). The color of item 1
was changed back to unselected item color when I released the mouse. But the color of item 2, which is currently selected item , is the boring gray/blue.
George
Thanks for your reply. I tried out your code. The color of the selected item is still the default color. It seems that the background color set in your code is overlayed by the default color, which is kind of gray/blue. Here is what I observed.
The default color is shown on a item,say item 1, I selected. Now, I press
mouse on another item,say item 2, the color of the previously selected item, item 1, changed to the color of the selected item color, which is defined in the code(e.g., red). The color of item 1
was changed back to unselected item color when I released the mouse. But the color of item 2, which is currently selected item , is the boring gray/blue.
George
BillyRayPreachersSon
Programmer
Try modifying the onchange declaration to be:
Code:
onchange="highlightSelected(this, '#FFFFFF', '#FF0000');blur();"instead.
Hope this helps,
Dan
- Thread starter
- #7
BillyRayPreachersSon
Programmer
If you're trying to remove the blue highlight bar that you see as you move the mouse over the dropdown options, then as far as I know, this cannot be done. The solution I've given is the closest you will get to this.
However, I find it strange that you don't see any highlighting at all - both versions work for me in IE6 with no problems. Maybe your browser is screwed?
Dan
-
1
- #9
Not sure if this is what you mean but for the selected option to show the bg color it must be out of focus. So what i did was to move focus to the next element.
Hope that is what you mean.
Glen
Code:
<html>
<head>
<script type="text/javascript">
<!--
function highlightSelected(selObj, nonSelCol, selCol)
{
for (var loop=0; loop<selObj.options.length; loop++)
selObj.options[loop].style.backgroundColor = (loop != selObj.selectedIndex) ? nonSelCol : selCol;
}
//-->
</script>
</head>
<body>
<form>
<select onchange="highlightSelected(this, '#FFFFFF', '#FF0000');sel.focus();">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<select id ="sel" onchange="highlightSelected(this, '#FFFFFF', '#00FF00'); hid.focus();">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<input type = "submit" value = "submit" id = "hid">
</form>
</body>
</html>Glen
BillyRayPreachersSon
Programmer
Glen,
That's what the "blur();" did in my updated post.
Dan
That's what the "blur();" did in my updated post.
Dan
- Thread starter
- #11
Dan I tried your script and the blur() call didn't work for me, so I changed your code to change focus. Let me know if Blur worked for you please. Thanks for the star George!
Glen
Glen
BillyRayPreachersSon
Programmer
It did work for me - which is weird... I'm using IE6... How strange!
Guess that goes to show that Javascript that works on one machine might not always work on another!
Dan
BillyRayPreachersSon
Programmer
Oops - how very embarassing!... I just checked my source again, out of interest, only to find that it wasn't the same as the source I posted!... I must have done one of those forgetful coding moments ;o)
If you ignore the "blur();" (not needed ;o)... And add this line to the end of the highlightSelected function, it'll work as I had intended (honest ;o):
Having said all of that, I still stand by my previous comment about Javascript not always working on all identical browsers ;o)
Dan
If you ignore the "blur();" (not needed ;o)... And add this line to the end of the highlightSelected function, it'll work as I had intended (honest ;o):
Code:
document.getElementsByTagName('body')[0].focus();Having said all of that, I still stand by my previous comment about Javascript not always working on all identical browsers ;o)
Dan
Works great now Dan and a better solution than mine, although it's the same principle. I've had quite a few of "Those coding moments" myself. Regularly actually ;-)
Glen
Glen
BillyRayPreachersSon
Programmer
Hehe.. it's all too easy to do.. Falling asleep at the keybbbbbbbbbbbbbbbbbbbbbbbbbb
- Status
Similar threads
- Locked
- Question