I have a selectlist with selectoption styled individually. I want to show the background color of selectlist same as the first child option on page-load. I've this code which is not working on pageload but onchange it is working :

<apex:selectList id="theSelectList" value="{!s}"  multiselect="false" size="1"   onchange="this.className=this.options[this.selectedIndex].className"  >
<apex:selectOptions value="{!Matrix}"/>

Each selectoption is using HTML style as:

SelectOption entry = new SelectOption(p.id,'<option value="' + p.name + '"class="' + ColorMap.get(p.Icon_Name_vod__c) + '">' + p.name + '</option>');

1 Answer 1


This JavaScript is more likely to work:

jQuery(document).ready(function() {
    var className = this.options[this.selectedIndex].className;

As the Apex SelectOption class don't provide a way to specify the CSS class I suggest that you build the <option> elements yourself in a loop in your Visualforce.

Use your browser's "View Source" to check that the HTML is as you expect in the resulting page.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .