[Slv]Individual text colours for individual options dropdown

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
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

Post by impulse() »

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?
Last edited by impulse() on Sun Jan 13, 2008 2:01 pm, edited 1 time in total.
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

code?
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Re: Individual text colours for individual options in a drop

Post by superdezign »

impulse() wrote:trying to change the colour returns 'no properties' error from Firefoxs error console.
No properties from where?
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Re: Individual text colours for individual options in a drop

Post by VladSun »

impulse() wrote:Has anybody achieved this before?
Yes, it could be done. But first post your code.
There are 10 types of people in this world, those who understand binary and those who don't
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Post by kaszu »

<ul> <ol> lists can't have individual text colors for each item, for that you will need to code your own javascript drop down.
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Post by VladSun »

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.
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
User avatar
Zoxive
Forum Regular
Posts: 974
Joined: Fri Apr 01, 2005 4:37 pm
Location: Bay City, Michigan

Post by Zoxive »

VladSun wrote: huh?!? I don't think so...
And I think the OP is about <select> tag, not <ol> or <ul>
All OP states is "list", I would assume <ol> and or <ul>.
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Post by VladSun »

Zoxive wrote:
VladSun wrote: huh?!? I don't think so...
And I think the OP is about <select> tag, not <ol> or <ul>
All OP states is "list", I would assume <ol> and or <ul>.
And the title of the OP is "Individual text colours for individual options in a dropdown"
There are 10 types of people in this world, those who understand binary and those who don't
User avatar
Zoxive
Forum Regular
Posts: 974
Joined: Fri Apr 01, 2005 4:37 pm
Location: Bay City, Michigan

Post by Zoxive »

VladSun wrote: Ant the title of the OP is "Individual text colours for individual options in a dropdown"
Ah, title good point.

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>
Works fine. Must be the code as all the posts stated.
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

Post by impulse() »

The code I wrote was :

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>
But your code works fine Zoxive, thanks.
User avatar
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

Post by R4000 »

impulse() wrote:The code I wrote was :

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>
But your code works fine Zoxive, thanks.
The problem with your code (from what I can see) is that fact your <option> tags have two ids:

Code: Select all

<option value = '1' id = 'opt1' id = 'but1'> One </option>
    <option value = '2' id = 'opt2' id = 'but2'> Two </option>
You can only have one ID as far as i am aware.
And the other problem is:

Code: Select all

document.getElementById('dd').opt1.style.color = 'green';
      document.getElementById('dd').opt2.style.color = 'orange';
The only way this would work would be if you set the 'name' tags on your options, to be 'opt1' and 'opt2' and 'dd' was the id of your form.
What you really want is:

Code: Select all

<option value = '1' id = 'opt1'> One </option>
    <option value = '2' id = 'opt2'> Two </option>
and

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

Post by impulse() »

Ahhh, such a silly mistake :)

Thanks for everybodies input.
Post Reply