How to Implement custom pickList in visualforce salesforce

Sometimes we need to display custom data like a picklist field in visualforce page. If we have a picklist field then this can be easily displayed using inputfield tag. But in case of custom values this cannot be achieved using inputfield.  So for this salesforce provided "selectList", "SelectOption", "SelectOptions" attributes. I have demonstrated selectList below for both selectOption and selectOptions below.

 --Visual force Page--

<apex:page standardController="Account" extensions="CustomPickListDemo">
  <apex:form >
    <apex:pageblock >
    <apex:panelGrid columns="5">
      Select State &nbsp;<apex:selectList value="{!SelectedState}" multiselect="false" size="1">
         <apex:selectOption itemValue="Goa" itemLabel="Goa"/>
         <apex:selectOption itemValue="Maharashtra" itemLabel="Maharashtra"/>
         <apex:selectOption itemValue="West Bengal" itemLabel="West Bengal"/>
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Select City &nbsp;<apex:selectList value="{!SelectedCity}" multiselect="false" size="1">
         <apex:selectOptions value="{!City}"/>

-- Controller --

public with sharing class CustomPickListDemo {
Public String SelectedState{get;set;}
Public String SelectedCity{get;set;}
    public CustomPickListDemo(ApexPages.StandardController controller) {

    public List<SelectOption> getCity() {
        List<SelectOption> CityOptions = new List<SelectOption>();
        CityOptions.add(new SelectOption('Panaji','PanajiLabel'));
        CityOptions.add(new SelectOption('Kolkata','Kolkata'));
        CityOptions.add(new SelectOption('Pune','Pune'));
        CityOptions.add(new SelectOption('Mumbai','Mumbai'));
        CityOptions.add(new SelectOption('Margao','Margao'));

        return CityOptions ;

In this statement <apex:selectList value="{!SelectedState}" multiselect="false" size="1"> variable "SelectedState" will hold the selected picklist value(state) similarly for  <apex:selectList value="{!SelectedCity}" multiselect="false" size="1"> SelectedCity variable will hold the selected city. Parameter size let you define the number of values visibile. For picklist set this to 1. You can also make this field multiselect field but this will not resemble to the standard multiselect provided by salesforce.

In case of selectOption you have to add individual elements, but for selectOptions you can iterate over a list which needs to be formed in controller. In above example "City" list is used in selectOptions.

SelectOption object: Lets debug/Know this open statement SelectOption('Panaji','PanajiLabel')); In this case "PanajiLabel" will be displayed on your page but if you want to refer this in controller the actual value will be panaji. Its always better you keep both label and actual value same. I kept it different just for demonstration purpose.


  1. hi,

    i have number in my picklist 1 to 9
    if 1 is selected
    table must viewed only 1 row(except headings)
    please share your ideas....!

    thank you,
    prasad vdv

  2. Hi Prasad,
    You can use offset in the List Query you are using to display in the table.
    On change of value in picklist, set this offset variable and call the List query then rerender the table. you will be able to view selected number of rows in the table.
    Prashanth Kumar