Custom Picklist in visualforce salesforce

Custom Picklist in visualforce salesforce

Sometime there is requirement to display custom picklist field in visualforce page. If we have a picklist field then it can be displayed using inputfield tag easily. But if we want to display a custom values in picklist, It can not be done using inputfield tag. We can display custom picklist using ‘selectList’ tag in visualforce. We can display values or options for custom picklist using ‘selectOption’ or ‘selectOptions’ tag.

In the example below, we are showing two custom picklist. In first picklist we are using selectList with selectOption. We are showing list of countries using selectOption. In second picklist we are using selectList with selectOptions to display list of countries. We are setting selectOption list using apex code. We are setting list manually in Apex code, we can also set list dynamically using SOQL query and apex code in controller. In the example below, select value in both picklist and then click on save button. Then, selected picklist value will be shown in page.

Click for Demo

Custom Picklist in Visualforce Salesforce


Visualforce Page:

<apex:page controller="customPickListInVFDemoController" tabStyle="Account">
  <apex:form >
    <apex:pageBlock title="Custom PickList Demo" id="out">
        <apex:pageBlockButtons >
            <apex:commandButton value="Save" action="{!save}" rerender="out" status="actStatusId"/>
            <apex:actionStatus id="actStatusId">
                <apex:facet name="start">
                    <img src="/img/loading.gif" />
        <apex:pageBlockSection title="Custom Picklist Using selectList and selectOption" collapsible="false">
            <apex:selectList value="{!selectedCountry1}" multiselect="false" size="1">
                <apex:selectOption itemValue="INDIA" itemLabel="India"/>
                <apex:selectOption itemValue="USA" itemLabel="USA"/>
                <apex:selectOption itemValue="United Kingdom" itemLabel="UK"/>
            <apex:outputText value="{!selectedCountry1}" label="You have selected:"/>
        <apex:pageBlockSection title="Custom Picklist Using selectList and selectOptions" collapsible="false">
            <apex:selectList value="{!selectedCountry2}" multiselect="false" size="1">
                <apex:selectOptions value="{!countriesOptions}"/>
            <apex:outputText value="{!selectedCountry2}" label="You have selected:"/>

Apex Code:

public class customPickListInVFDemoController {
public String selectedCountry1{get;set;}
public String selectedCountry2{get;set;}
    public customPickListInVFDemoController(){
    public List<SelectOption> getCountriesOptions() {
        List<SelectOption> countryOptions = new List<SelectOption>();
        countryOptions.add(new SelectOption('','-None-'));
        countryOptions.add(new SelectOption('INDIA','India'));
        countryOptions.add(new SelectOption('USA','USA'));
        countryOptions.add(new SelectOption('United Kingdom','UK'));
        countryOptions.add(new SelectOption('Germany','Germany'));
        countryOptions.add(new SelectOption('Ireland','Ireland'));

        return countryOptions;
    public PageReference save(){
        return null;

Permanent link to this article:


1 ping

Skip to comment form

    • krishna on September 26, 2014 at 12:33 pm
    • Reply

    vf page and controller, I am struggling with this vf page and controller can u help me frds

    1. Hi krishna,

      Can you explain your requirement in more details. What I understood is that you want to populate ‘System Model’ (which is formula field) based on selected hospital. First of all formula field is populated only when record is saved. If you want to populate it based on some other criteria(not formula field), then when you select or change Hospital you need to call one controller method, apply your logic to get System Model in controller method, then rerender you page to show System Model in page.


    • fibi on March 7, 2015 at 2:28 am
    • Reply

    Hi, I have a similar task but I’m calling a custom setting from class, the class is the controller for the VF. In my custom setting I have a field “case closure reasons definition”, then under “manage” I have a list of reasons. For each reason I have enter the definition in the field “case closure reasons definition.” Now, I have created a VF and the controller class and I’m displaying the reasons in a dropdown menu and I want to display the definition when I click on a reason. How do I do that? here is my code:

    public with sharing class CaseReasonsDefinitions {

    public String reasonsDef { get; set; }

    //generate definitions as dropdown from reason setting
    public List getReasonsSelectList()
    List options = new List();
    options.add(new SelectOption(”, ‘ — Select One — ‘));

    //Find all the definitions in the custom setting
    Map caseReasons = Case_Closure_Reason_Definitions__c.getAll();

    // Sort them by name
    List reasonNames = new List();

    // Create a select options
    for (String reasonName : reasonNames)
    Case_Closure_Reason_Definitions__c reason = caseReasons.get(reasonName);
    options.add(new SelectOption(‘reason.Case_Closure_Reasons__c’, reason.Name + ‘ – ‘ + reason.Case_Closure_Reason_Definitions__c));
    return options;



    VF page:


    1. Hi Fibi,

      You can add onclick event using javasccript or actionfunction or actionsupport on reason. And you will display definition when onclick event occurs on reason.


  1. […] Custom Picklist in visualforce salesforce – … – Custom Picklist in visualforce salesforce example. We can display custom picklist in visualforce page using selectList with selectOption and selectOptions […]

Leave a Reply

Your email address will not be published.