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

[IndyNS]

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

[Dormilich]

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

[IndyNS]

<style>
option.Avaliable {background-color:green} 
option.Busy {background-color:red}
</style>
 

then in the body

<option value="0" class="Avaliable">Avaliable</option>
<option value="1" class="Busy">Busy</option>
 

[Dormilich]

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