Change Colour of text in a [selbox.options.length] Drop down

Irianna · 04-21-2008, 11:48 AM

Hi,
I have some code:

Code:

<html>

<head>
<title>Training booking form</title>
<link rel="stylesheet" href="../style.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
 A:link  
{ color:#990000; text-decoration: none }
 A:visited 
{ color:#990000; text-decoration: none }
 A:hover  
{ color:#990000; text-decoration: underline }

</style>
<link rel="stylesheet" href="../style.css" type="text/css">
<link rel="stylesheet" href="../style.css" type="text/css">
<script language="JavaScript" fptype="dynamicanimation">
<!--
function dynAnimation() {}
function clickSwapImg() {}
//-->
</script>
<script language="JavaScript1.2" fptype="dynamicanimation" src="../animate.js">
</script>
<script type="text/javascript">
function setOptions(chosen) {
var selbox = document.FrontPage_Form1.date;
 
selbox.options.length = 0;
if (chosen == " ") {
  selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' ');
 
}
if (chosen == "AIM (8.30 am - 4.30 pm)") {
  selbox.options[selbox.options.length] = new Option('4 July 2008','4 July 2008');							
  selbox.options[selbox.options.length] = new Option('7 July 2008 - 5 places only','7 July 2008 - 5 places only');
  selbox.options[selbox.options.length] = new Option('22 July 2008','22 July 2008');
  selbox.options[selbox.options.length] = new Option('28 July 2008','28 July 2008');
  selbox.options[selbox.options.length] = new Option('8 August 2008','8 August 2008');
  selbox.options[selbox.options.length] = new Option('29 August 2008','29 August 2008');
  selbox.options[selbox.options.length] = new Option('1 September 2008 - 5 places only','1 September 2008 - 5 places only');
  selbox.options[selbox.options.length] = new Option('16 September 2008','16 September 2008');
  selbox.options[selbox.options.length] = new Option('17 September 2008','17 September 2008');
  selbox.options[selbox.options.length] = new Option('26 September 2008','26 September 2008');
  selbox.options[selbox.options.length] = new Option('2 October 2008','2 October 2008');
  selbox.options[selbox.options.length] = new Option('10 October 2008','10 October 2008');
  selbox.options[selbox.options.length] = new Option('21 October 2008','21 October 2008');
  selbox.options[selbox.options.length] = new Option('29 October 2008','29 October 2008');
  selbox.options[selbox.options.length] = new Option('3 November 2008 - 5 places only','3 November 2008 - 5 places only');
  selbox.options[selbox.options.length] = new Option('13 November 2008','13 November 2008');
  selbox.options[selbox.options.length] = new Option('26 November 2008','26 November 2008');
  selbox.options[selbox.options.length] = new Option('4 December 2008','4 December 2008');
}
if (chosen == "Instructors' Days") {
  selbox.options[selbox.options.length] = new Option('AIM 31 July 2008','AIM - 31 July 2008');
  selbox.options[selbox.options.length] = new Option('ILS 3 October 2008','ILS - 3 October 2008');
}
if (chosen == "AIM/ILS (Medical Students Only)") {
  selbox.options[selbox.options.length] = new Option('AIM - 7 July 2008','AIM - 7 July 2008');
  selbox.options[selbox.options.length] = new Option('AIM - 1 September 2008','AIM - 1 September 2008');
  selbox.options[selbox.options.length] = new Option('AIM - 3 November 2008','AIM - 3 November 2008');
  selbox.options[selbox.options.length] = new Option('ILS - 8 July 2008','ILS - 8 July 2008');
  selbox.options[selbox.options.length] = new Option('ILS - 2 September 2008','ILS - 2 September 2008');
  selbox.options[selbox.options.length] = new Option('ILS - 4 November 2008','ILS - 4 November 2008');
}

Im trying to find a way to get one of the boxes to change colour. for example, if a course is Full, i'd like to be able to put FULL in Bold Red letters at the end of the date, so that poeple knew not to select that option.

Is there anyone that knows how to do this?

If i put say:

Code:

selbox.options[selbox.options.length] = new Option('ILS - 4 November 2008 <b>FULL,</b>','ILS - 4 November 2008');

The drop down box just displays: 'ILS - 4 November 2008 <b>FULL,</b>

Many thanks in advance, Irianna

Stooshie · 04-21-2008, 12:12 PM

Hi there,

Code:

	document.forms["myform"].myselect.options[3].style.backgroundColor = "#CC3300";
	document.forms["myform"].myselect.options[3].style.color = "#FFFFFF";

This works in firefox. Im having problems with IE crashing at the moment so can't test it just now.

Hope it helps.

Irianna · 04-21-2008, 12:18 PM

Hi,

Thanks everso for your speedy reply.

Where abouts would I put this?

Sorry Im a little ditsy sometimes

Stooshie · 04-21-2008, 04:33 PM

It depends when you want it to happen.

You could have it event driven so have an onclick or onchange event on your select box.

eg

Code:

	<select onchange="javascript:document.forms["myform"].myselect.options[3].style.backgroundColor = "#CC3300";">
	<option>...</option>
	.
	.
	</select>

Or it can go immediately after you have added the option.

Also, do you want just one of the options to change or all of them?

in the code

Code:

document.forms["myform"].myselect.options[3].style.backgroundColor = "#CC3300";

The number three is the 4th option in the select (starts from 0 remember). If you want all of them to change I think it's just

Code:

document.forms["myform"].myselect.style.backgroundColor = "#CC3300";

Irianna · 04-22-2008, 09:14 AM

Oh I dont want it to happen at a specific time.
Id like it so that I can just edit the code to make one of them in red

Stooshie · 04-22-2008, 09:41 AM

OK, just do:

Code:

	document.forms["myform"].myselect.style.backgroundColor = "#CC3300";
	document.forms["myform"].myselect.style.color = "#FFFFFF";

after you have added all the options.

Irianna · 04-22-2008, 11:16 AM

I really appreciate the help, but im unsure where this goes.

I only want it for 1 option on the whole list.

So like

if (chosen == "AIM/ILS (Medical Students Only)") {
selbox.options[selbox.options.length] = new Option('AIM - 7 July 2008','AIM - 7 July 2008');
selbox.options[selbox.options.length] = new Option('AIM - 1 September 2008','AIM - 1 September 2008');
selbox.options[selbox.options.length] = new Option('AIM - 3 November 2008','AIM - 3 November 2008');
selbox.options[selbox.options.length] = new Option('ILS - 8 July 2008','ILS - 8 July 2008');
selbox.options[selbox.options.length] = new Option('ILS - 2 September 2008','ILS - 2 September 2008'); <-- I want to display this one in red text in the drop down box
selbox.options[selbox.options.length] = new Option('ILS - 4 November 2008','ILS - 4 November 2008');
}

So to do that, where do i put your code?

Stooshie · 04-22-2008, 11:21 AM

Code:

if (chosen == "AIM/ILS (Medical Students Only)") {
selbox.options[selbox.options.length] = new Option('AIM - 7 July 2008','AIM - 7 July 2008');
selbox.options[selbox.options.length] = new Option('AIM - 1 September 2008','AIM - 1 September 2008');
selbox.options[selbox.options.length] = new Option('AIM - 3 November 2008','AIM - 3 November 2008');
selbox.options[selbox.options.length] = new Option('ILS - 8 July 2008','ILS - 8 July 2008');
selbox.options[selbox.options.length] = new Option('ILS - 2 September 2008','ILS - 2 September 2008'); <-- I WANT THIS ONE IN RED

selbox.options[selbox.options.length-1].style.backgroundColor = "#CC3300";
selbox.options[selbox.options.length-1].style.color = "#FFFFFF";

selbox.options[selbox.options.length] = new Option('ILS - 4 November 2008','ILS - 4 November 2008');
}

Irianna · 04-22-2008, 11:26 AM

YAY!
That works, thank you very much!

Old Pedant · 04-09-2012, 10:01 PM

No, not really. And this really never had anything to do with ASP in the first place. It should be in HTML/CSS forum. Or, at most, in JavaScript.

You can't block an option, directly, but you could check for it with JavaScript and, if it is chosen, ignore the choice.