[Slv]Individual text colours for individual options dropdown
Moderator: General Moderators
-
impulse()
- Forum Regular
- Posts: 748
- Joined: Wed Aug 09, 2006 8:36 am
- Location: Staffordshire, UK
- Contact:
[Slv]Individual text colours for individual options dropdown
I'm able to change the text colour of all the items in a list with Javascript. But assigning id's to each option and then trying to change the colour returns 'no properties' error from Firefoxs error console.
Has anybody achieved this before?
Has anybody achieved this before?
Last edited by impulse() on Sun Jan 13, 2008 2:01 pm, edited 1 time in total.
- Kieran Huggins
- DevNet Master
- Posts: 3635
- Joined: Wed Dec 06, 2006 4:14 pm
- Location: Toronto, Canada
- Contact:
- superdezign
- DevNet Master
- Posts: 4135
- Joined: Sat Jan 20, 2007 11:06 pm
Re: Individual text colours for individual options in a drop
No properties from where?impulse() wrote:trying to change the colour returns 'no properties' error from Firefoxs error console.
Re: Individual text colours for individual options in a drop
Yes, it could be done. But first post your code.impulse() wrote:Has anybody achieved this before?
There are 10 types of people in this world, those who understand binary and those who don't
huh?!? I don't think so...kaszu wrote:<ul> <ol> lists can't have individual text colors for each item, for that you will need to code your own javascript drop down.
And I think the OP is about <select> tag, not <ol> or <ul>
There are 10 types of people in this world, those who understand binary and those who don't
And the title of the OP is "Individual text colours for individual options in a dropdown"Zoxive wrote:All OP states is "list", I would assume <ol> and or <ul>.VladSun wrote: huh?!? I don't think so...
And I think the OP is about <select> tag, not <ol> or <ul>
There are 10 types of people in this world, those who understand binary and those who don't
Ah, title good point.VladSun wrote: Ant the title of the OP is "Individual text colours for individual options in a dropdown"
Anyways..
Code: Select all
<select name="colors">
<option>---</option>
<option id="1" value="">---</option>
<option id="2" value="">---</option>
<option id="3" value="">---</option>
</select>
<script>
function test(id){
cur = document.getElementById(id);
cur.style.color = 'FF0000';
}
</script>
<a href="#" onclick="test('1');">test 1</a>
<a href="#" onclick="test('2');">test 2</a>
<a href="#" onclick="test('3');">test 3</a>
-
impulse()
- Forum Regular
- Posts: 748
- Joined: Wed Aug 09, 2006 8:36 am
- Location: Staffordshire, UK
- Contact:
Re: Individual text colours for individual options in a dropdown
The code I wrote was :
But your code works fine Zoxive, thanks.
Code: Select all
<head>
<script type = 'text/javascript'>
function changeColor() {
document.getElementById('dd').opt1.style.color = 'green';
document.getElementById('dd').opt2.style.color = 'orange';
}
</script>
</head>
<body>
<form id = 'dd'>
<select name = 'dropdown' id = 'dropdown'>
<option value = ''> </option>
<option value = '1' id = 'opt1' id = 'but1'> One </option>
<option value = '2' id = 'opt2' id = 'but2'> Two </option>
</select>
<input type = 'button' onClick = 'changeColor();' value = 'Change Color'>
</form>
</body>- R4000
- Forum Contributor
- Posts: 168
- Joined: Wed Mar 08, 2006 12:50 pm
- Location: Cambridge, United Kingdom
Re: Individual text colours for individual options in a dropdown
The problem with your code (from what I can see) is that fact your <option> tags have two ids:impulse() wrote:The code I wrote was :
But your code works fine Zoxive, thanks.Code: Select all
<head> <script type = 'text/javascript'> function changeColor() { [code] document.getElementById('dd').opt1.style.color = 'green'; document.getElementById('dd').opt2.style.color = 'orange';[/code] } </script> </head> <body> <form id = 'dd'> <select name = 'dropdown' id = 'dropdown'> <option value = ''> </option> <option value = '1' id = 'opt1' id = 'but1'> One </option> <option value = '2' id = 'opt2' id = 'but2'> Two </option> </select> <input type = 'button' onClick = 'changeColor();' value = 'Change Color'> </form> </body>
Code: Select all
<option value = '1' id = 'opt1' id = 'but1'> One </option>
<option value = '2' id = 'opt2' id = 'but2'> Two </option>And the other problem is:
Code: Select all
document.getElementById('dd').opt1.style.color = 'green';
document.getElementById('dd').opt2.style.color = 'orange';What you really want is:
Code: Select all
<option value = '1' id = 'opt1'> One </option>
<option value = '2' id = 'opt2'> Two </option>Code: Select all
document.getElementById('opt1').style.color = 'green';
document.getElementById('opt2').style.color = 'orange';But the other code mention on this page will work, and will work better.
I only wrote this to let you know where you where going wrong.
-
impulse()
- Forum Regular
- Posts: 748
- Joined: Wed Aug 09, 2006 8:36 am
- Location: Staffordshire, UK
- Contact:
Re: Individual text colours for individual options in a dropdown
Ahhh, such a silly mistake 
Thanks for everybodies input.
Thanks for everybodies input.