function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Devayani Avadhani UppuDevayani Avadhani Uppu 

html placeholder apex:selectlist/apex:selectOption in Visualforce page

Hi All,
I am trying to display a picklist using apex on the Visualforce page with elements apex:selectlist/apex:selectOption, but the html passthrough attribute for place holder doesnt seemed to be working. Below is my code for reference. 
<apex:selectList id="businessType" size="1" value="{!businessType}" html-placeholder="Select business type">
     <apex:selectOptions value="{!businessTypes}" />
 </apex:selectList>
code in controller:
 public List<SelectOption> businessTypes {
        get {
            if (businessTypes == null) {
                businessTypes = getbusinessTypes();
            }
            return businessTypes;
        }
        private set;
    }
    private List<SelectOption> getbusinessTypes() {
        List<SelectOption> optionList = new List<SelectOption>();
        
        try {
            Map<String, Schema.Sobjectfield> corpAppFields = Schema.SObjectType.FXIP_OLAF__c.fields.getMap();
            Schema.DescribeFieldResult describe = corpAppFields.get('Business_Entity_Type__c').getDescribe();
            List<Schema.PicklistEntry> options = describe.getPicklistValues();
            for (Schema.PicklistEntry option : options) {
                optionList.add(new selectOption(option.getValue(), option.getLabel()));
            }           
                      
        }
        catch(Exception ex) {
            System.debug('Unable to load Business Types');
            throw ex;
        }
        return optionList;
    }
 
Best Answer chosen by Devayani Avadhani Uppu
Nikhil Sharma 17Nikhil Sharma 17
<style>
select
{
    color: #ccc;
}
option
{
    color: #000;
}
option:first-child
{
    color: #ccc;
}
</style>
<script type="text/javascript">
    function changeMe(sel)
    {
      sel.style.color = "#000";              
    }
</script>
call the 
onchange="changeMe(this)" 
in the <apex:selectlist

 

All Answers

Nikhil Sharma 17Nikhil Sharma 17
Hi Devayani,

For this you have to change in your Controller. Just add the 
public List<SelectOption> businessTypes {
        get {
            if (businessTypes == null) {
                businessTypes = getbusinessTypes();
            }
            return businessTypes;
        }
        private set;
    }
    private List<SelectOption> getbusinessTypes() {
        List<SelectOption> optionList = new List<SelectOption>();
        
        try {
            Map<String, Schema.Sobjectfield> corpAppFields = Schema.SObjectType.FXIP_OLAF__c.fields.getMap();
            Schema.DescribeFieldResult describe = corpAppFields.get('Business_Entity_Type__c').getDescribe();
            List<Schema.PicklistEntry> options = describe.getPicklistValues();
optionList.add(new selectOption('', 'Select Business type');
            for (Schema.PicklistEntry option : options) {
                optionList.add(new selectOption(option.getValue(), option.getLabel()));
            }           
                      
        }
        catch(Exception ex) {
            System.debug('Unable to load Business Types');
            throw ex;
        }
        return optionList;
    }

before the for loop.

 
Devayani Avadhani UppuDevayani Avadhani Uppu
Thank you for the answer but it cannot be a placeholder as per business requirement, we cannot grey that value alone from the other picklist values, is that achievable? If yes may be as a work around use the above solution and just display first value in grey colour and make it look like a placeholder.
Nikhil Sharma 17Nikhil Sharma 17
Hi Devayani,

Yes we can achieve this by using javascript.
Nikhil Sharma 17Nikhil Sharma 17
<style>
select
{
    color: #ccc;
}
option
{
    color: #000;
}
option:first-child
{
    color: #ccc;
}
</style>
<script type="text/javascript">
    function changeMe(sel)
    {
      sel.style.color = "#000";              
    }
</script>
call the 
onchange="changeMe(this)" 
in the <apex:selectlist

 
This was selected as the best answer
Devayani Avadhani UppuDevayani Avadhani Uppu
Thank you Nikhil!