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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Using JS to changing the background color in a drop down.

    Here is what I am trying to do. I am using a JS button to create a new row in a table. In the new row I have two text boxes and a drop down list. I am wanting to set the background color of each of my options in the drop list.

    Here is the section of the JS code that I create the drop down list.
    //cell 1
    var cell1 = row.insertCell(1);
    var el = document.createElement("select");
    el.name = 'Status[]' // sets the name of the row to status
    el.options[0] = new Option("Available");
    el.options[1] = new Option("Busy");

    cell1.appendChild(el);

    In my HTML code I can get the first drop down list to have color but for any additional rows the color is not set. Any thoughts or suggestions would be greatly appreciated. I have been hitting my head against a wall for two weeks now.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,554
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    You just need to set in on each option.

    If you want them to all have the same color, you could do it with CSS.

    Also, you really should give both value and text for the options.
    Code:
    var cell1 = row.insertCell(1);
    var el = document.createElement("select");
    el.name = 'Status[]' // sets the name of the row to status
    el.className = "...your choice of class name..."; // optional
    el.options[0] = new Option("Available","Available");
    el.options[0].style.color = "red"; // optional
    el.options[1] = new Option("Busy","Busy");
    el.options[1].style.color = "blue"; // optional
    cell1.appendChild(el);
    If you choose to do it via the classname on the <select>, then just add to your <style>:
    Code:
    <style type="text.css">
    select.YourChoice option {
        color: red;
    }
    </style>
    Note that MSIE only supports color and backgroundColor as styles you can change on a per-option basis. (Might not be true for MSIE 9.)
    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.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,554
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    Interesting!

    Firefox IGNORES a style request for the option until you click on the <select>.

    An easy fix:
    Code:
    <style>
    select.YourClassName, select.YourClassName option { color: red; background-color: yellow; font-style: italic; }
    </style>
    Now all options, at all times, will show that color and background color.

    But yes, even MSIE 9 (and I know MSIE 8 and7) ignores the italic request unless it is placed on the <select>. It ignores it on individual <option>s.
    Last edited by Old Pedant; 05-30-2012 at 02:26 AM.
    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
    •