Add styleclass to selectlist same as the style of the first select option child on page load

Question

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"  >
<Script>
jQuery('[id$=theSelectList]').addClass(this.options[this.selectedIndex].className);
</Script>
<apex:selectOptions value="{!Matrix}"/>
</apex:selectlist>

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>');

Answer 1

This JavaScript is more likely to work:

<script>
jQuery(document).ready(function() {
    var className = this.options[this.selectedIndex].className;
    jQuery("[id$='theSelectList']").addClass(className);
});
</script>

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.