Changing background color of the options in a drop down menu using JS

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • IndyNS
    New Member
    • May 2012
    • 5

    Changing background color of the options in a drop down menu using JS

    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.
    Code:
    //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
    Last edited by Dormilich; May 30 '12, 06:13 AM. Reason: Please use [CODE] [/CODE] tags when posting code.
  • Dormilich
    Recognized Expert Expert
    • Aug 2008
    • 8694

    #2
    how do you set the color for the first dropdown list?

    Comment

    • IndyNS
      New Member
      • May 2012
      • 5

      #3
      Code:
      <style>
      option.Avaliable {background-color:green} 
      option.Busy {background-color:red}
      </style>
      then in the body
      Code:
      <option value="0" class="Avaliable">Avaliable</option>
      <option value="1" class="Busy">Busy</option>

      Comment

      • Dormilich
        Recognized Expert Expert
        • Aug 2008
        • 8694

        #4
        then you only need to give your new options the appropriate class names as well.

        Comment

        Working...