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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.