Custom Picklist In Visualforce Page Using Controller.

Arun Garg   6/03/2017   Comment  

1. Displaying custom picklist on visualforce page without using standard visualforce tag <apex:inputfield/>
2. If we have picklist field in object then we will use <apex:inputfield/> to show picklist on page and pass the api name of field correspondence to object in the value attribute.
3. Now In this post I am displaying custom values in picklist then I use <apex:selectList/> visualforce tag and define get,set type variable so that whatever value I will select from picklist that will assign in to this variable.
4. Now Use <apex:selectOption/> and <apex:selectOptions/> visualforce tags which are child of <apex:selectList/> visualforce tag.
5. <apex:selectOption/> use to display list of countries from visulforce pages.
6. <apex:selectOptions/> use to display list of countries by accepting custom list from the class.
7. I Create a custom list of 'SelectOption' manually in Apex code and use in the value attribute of <apex:selectOptions/>.
8. We can also set list dynamically using SOQL query and apex code in controller.

In below Example, select value from both picklist and then click on save button. Then , You will see selected picklist value on page.

Click For Demo

Visualforce Page:

<apex:page controller="customPickListCtr" sidebar="false" showHeader="false">

  <apex:form >

    <apex:pageBlock title="Custom PickList Demo" id="block">

        <apex:pageBlockButtons >

            <apex:commandButton value="Save" action="{!save}" rerender="block" status="loadingImage"/>

            <apex:actionStatus id="loadingImage">

                <apex:facet name="start">

                    <img src="/img/loading.gif" />

                </apex:facet>

            </apex:actionStatus>

        </apex:pageBlockButtons>

        <apex:pageBlockSection title="Custom Picklist Using selectList and selectOption" collapsible="true">

            <apex:selectList value="{!selectedCountryValue1}" multiselect="false" size="1">

                <apex:selectOption itemValue="INDIA" itemLabel="India"/>

                <apex:selectOption itemValue="JAPAN" itemLabel="JAPAN"/>

                <apex:selectOption itemValue="United Kingdom" itemLabel="UK"/>

                <apex:selectOption itemValue="CANADA" itemLabel="CANADA"/>

            </apex:selectList>

             

            <apex:outputText value="{!selectedCountryValue1}" label="You have selected:"/>

        </apex:pageBlockSection>

         

        <apex:pageBlockSection title="Custom Picklist Using selectList and selectOptions" collapsible="true">

            <apex:selectList value="{!selectedCountryValue2}" multiselect="false" size="1">

                <apex:selectOptions value="{!CountriesLists}"/>

            </apex:selectList>

             

            <apex:outputText value="{!selectedCountryValue2}" label="You have selected:"/>

        </apex:pageBlockSection>

    </apex:pageblock>

  </apex:form>

</apex:page>

Apex Class:

public class customPickListCtr

{

    public String selectedCountryValue1{get;set;}

    public String selectedCountryValue2{get;set;}

    public List<SelectOption> getCountriesLists() 

    {

        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('JAPAN','JAPAN'));

        countryOptions.add(new SelectOption('CANADA','CANADA'));

        return countryOptions;

    }

    public PageReference save(){

        return null;

    }

}