Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Apr 2008
    Posts
    5
    Thanks
    4
    Thanked 0 Times in 0 Posts

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

    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

  • #2
    Regular Coder Stooshie's Avatar
    Join Date
    Mar 2008
    Location
    Dundee, Scotland
    Posts
    378
    Thanks
    9
    Thanked 39 Times in 39 Posts
    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.
    Regards, Stooshie
    O

  • Users who have thanked Stooshie for this post:

    Irianna (04-22-2008)

  • #3
    New to the CF scene
    Join Date
    Apr 2008
    Posts
    5
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Hi,

    Thanks everso for your speedy reply.

    Where abouts would I put this?

    Sorry Im a little ditsy sometimes

  • #4
    Regular Coder Stooshie's Avatar
    Join Date
    Mar 2008
    Location
    Dundee, Scotland
    Posts
    378
    Thanks
    9
    Thanked 39 Times in 39 Posts
    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";
    Regards, Stooshie
    O

  • Users who have thanked Stooshie for this post:

    Irianna (04-22-2008)

  • #5
    New to the CF scene
    Join Date
    Apr 2008
    Posts
    5
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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

  • #6
    Regular Coder Stooshie's Avatar
    Join Date
    Mar 2008
    Location
    Dundee, Scotland
    Posts
    378
    Thanks
    9
    Thanked 39 Times in 39 Posts
    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.
    Regards, Stooshie
    O

  • Users who have thanked Stooshie for this post:

    Irianna (04-22-2008)

  • #7
    New to the CF scene
    Join Date
    Apr 2008
    Posts
    5
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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?
    Last edited by Irianna; 04-22-2008 at 11:19 AM.

  • #8
    Regular Coder Stooshie's Avatar
    Join Date
    Mar 2008
    Location
    Dundee, Scotland
    Posts
    378
    Thanks
    9
    Thanked 39 Times in 39 Posts
    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');
    }
    Regards, Stooshie
    O

  • Users who have thanked Stooshie for this post:

    Irianna (04-22-2008)

  • #9
    New to the CF scene
    Join Date
    Apr 2008
    Posts
    5
    Thanks
    4
    Thanked 0 Times in 0 Posts
    YAY!
    That works, thank you very much!

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,133
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •