Page 1 of 1

[Slv]Individual text colours for individual options dropdown

Posted: Wed Jan 09, 2008 4:46 am
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?

Posted: Wed Jan 09, 2008 5:40 am
by Kieran Huggins
code?

Re: Individual text colours for individual options in a drop

Posted: Wed Jan 09, 2008 6:34 am
by superdezign
impulse() wrote:trying to change the colour returns 'no properties' error from Firefoxs error console.
No properties from where?

Re: Individual text colours for individual options in a drop

Posted: Wed Jan 09, 2008 6:45 am
by VladSun
impulse() wrote:Has anybody achieved this before?
Yes, it could be done. But first post your code.

Posted: Wed Jan 09, 2008 12:39 pm
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.

Posted: Wed Jan 09, 2008 1:56 pm
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>

Posted: Wed Jan 09, 2008 2:35 pm
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>.

Posted: Wed Jan 09, 2008 2:37 pm
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"

Posted: Wed Jan 09, 2008 2:49 pm
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.

Re: Individual text colours for individual options in a dropdown

Posted: Fri Jan 11, 2008 3:59 am
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.

Re: Individual text colours for individual options in a dropdown

Posted: Sat Jan 12, 2008 11:34 am
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.

Re: Individual text colours for individual options in a dropdown

Posted: Sun Jan 13, 2008 2:00 pm
by impulse()
Ahhh, such a silly mistake :)

Thanks for everybodies input.