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
Ramya BalakrishnanRamya Balakrishnan 

how to display picklist values and multipicklist values in visualforce page

Hi all 

   I have a visualforce page form created in which i need to display picklist values as shown in attached file.Certificate and Strength picklist needs to created in visual force page.

Those picklist values are from the contact objects. I am not able to use Apex inputFields since it is not editable when i open this VF page through site.So I am using inputText to display other text fields.Can anybody help how to create this type of picklist in visualforce page.

Thanks
Ramya Balakrishnan
PriyaPriya (Salesforce Developers) 
Hey Ramya,

Refer this sample code to create multiselect picklist field in visualforce page: 
<apex:page controller="multiselect">
    <apex:form >
        <apex:panelGrid columns="3" id="abcd">
            <apex:selectList id="sel1" value="{!leftselected}" multiselect="true" style="width:100px" size="5">
                <apex:selectOptions value="{!unselectedvalues}" />
            </apex:selectList>
                <apex:panelGroup >
                    <br/>
                    <apex:image value="{!$Resource.multiselected}">
                        <apex:actionSupport event="onclick" action="{!selectclick}" reRender="abcd"/>
                    </apex:image>
                    <br/><br/>
                    <apex:image value="{!$Resource.multiunselected}">
                        <apex:actionSupport event="onclick" action="{!unselectclick}" reRender="abcd"/>
                    </apex:image>
                </apex:panelGroup>
            <apex:selectList id="sel2" value="{!rightselected}" multiselect="true" style="width:100px" size="5">
                <apex:selectOptions value="{!SelectedValues}" />
            </apex:selectList>
        </apex:panelGrid>
    </apex:form>
</apex:page>
  
public class multiselect {
 
    Set<String> originalvalues = new Set<String>{'A','B','C','D','E','F','G'};
    Public List<string> leftselected{get;set;}
    Public List<string> rightselected{get;set;}
    Set<string> leftvalues = new Set<string>();
    Set<string> rightvalues = new Set<string>();
     
    public multiselect(){
        leftselected = new List<String>();
        rightselected = new List<String>();
        leftvalues.addAll(originalValues);
    }
     
    public PageReference selectclick(){
        rightselected.clear();
        for(String s : leftselected){
            leftvalues.remove(s);
            rightvalues.add(s);
        }
        return null;
    }
     
    public PageReference unselectclick(){
        leftselected.clear();
        for(String s : rightselected){
            rightvalues.remove(s);
            leftvalues.add(s);
        }
        return null;
    }
 
    public List<SelectOption> getunSelectedValues(){
        List<SelectOption> options = new List<SelectOption>();
        List<string> tempList = new List<String>();
        tempList.addAll(leftvalues);
        tempList.sort();
        for(string s : tempList)
            options.add(new SelectOption(s,s));
        return options;
    }
 
    public List<SelectOption> getSelectedValues(){
        List<SelectOption> options1 = new List<SelectOption>();
        List<string> tempList = new List<String>();
        tempList.addAll(rightvalues);
        tempList.sort();
        for(String s : tempList)
            options1.add(new SelectOption(s,s));
        return options1;
    }
}


Modify it as per your need.

For more detail, refer this blog :- 
https://developer.salesforce.com/blogs/developer-relations/2012/06/a-multiselect-picklist-visualforce-component


Kindly mark it as the best answer if it helps.

Thank you​​​​​​​

Priya Ranjan
mukesh guptamukesh gupta
HI Ramya,

Please use below code:-
  
<apex:page controller="SampleController">
    <apex:form>
        <apex:panelGrid columns="3" id="abcd">
            <apex:selectList id="sel1" value="{!leftSelected}" multiselect="true" style="width:100px" size="5">
                <apex:selectOptions value="{!DeselectedValues}" />
            </apex:selectList>
             
            <apex:panelGroup>
                <br/>
                <apex:image styleClass="picklistArrowRight" value="/s.gif">
                    <apex:actionSupport event="onclick" action="{!getSelect}" reRender="abcd"/>
                </apex:image>
                <br/><br/>
                <apex:image styleClass="picklistArrowLeft" value="/s.gif">
                    <apex:actionSupport event="onclick" action="{!getDeselect}" reRender="abcd"/>
                </apex:image>
            </apex:panelGroup>
            <apex:selectList id="sel2" value="{!rightSelected}" multiselect="true" style="width:100px" size="5">
                <apex:selectOptions value="{!SelectedValues}" />
            </apex:selectList>
        </apex:panelGrid>
    </apex:form>
</apex:page>
  
public class SampleController {
     
    Set<String> picklistValues = new Set<String> {'New York','California','Texas','Los Angeles','Chicago','San Francisco', 'Washington'};
    Public List<String> leftSelected {get;set;}
    Public List<String> rightSelected {get;set;}
    Set<String> leftValues = new Set<String>();
    Set<String> rightValues = new Set<String>();
     
    public SampleController(){
        leftSelected = new List<String>();
        rightSelected = new List<String>();
        leftValues.addAll(picklistValues);
    }
     
    public PageReference getSelect(){
        rightSelected.clear();
        for(String s : leftSelected){
            leftValues.remove(s);
            rightValues.add(s);
        }
        return null;
    }
     
    public PageReference getDeselect(){    
        leftSelected.clear();
        for(String s : rightSelected){
            rightValues.remove(s);
            leftValues.add(s);
        }
        return null;
    }
     
    public List<SelectOption> getDeselectedValues(){
        List<SelectOption> options = new List<SelectOption>();
        List<String> objList = new List<String>();
        objList.addAll(leftValues);
        objList.sort();
        for(String s : objList){
            options.add(new SelectOption(s,s));
        }
        return options;
    }
     
    public List<SelectOption> getSelectedValues(){
         
        List<SelectOption> options = new List<SelectOption>();
        List<String> objList = new List<String>();
        objList.addAll(rightvalues);
        objList.sort();
        for(String s : objList){
            options.add(new SelectOption(s,s));
        }
        return options;
    }
}

if you need any assistanse, Please let me know!!

Kindly mark my solution as the best answer if it helps you.

Thanks
Mukesh