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

Visualforce Page:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

<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:facet>             </apex:actionStatus>         </apex:pageBlockButtons>         <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:selectList>                           <apex:outputText value="{!selectedCountry1}" label="You have selected:"/>         </apex:pageBlockSection>                   <apex:pageBlockSection title="Custom Picklist Using selectList and selectOptions" collapsible="false">             <apex:selectList value="{!selectedCountry2}" multiselect="false" size="1">                 <apex:selectOptions value="{!countriesOptions}"/>             </apex:selectList>                           <apex:outputText value="{!selectedCountry2}" label="You have selected:"/>         </apex:pageBlockSection>     </apex:pageblock>   </apex:form> </apex:page>

Apex Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

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;     } }