I have 2 multi selectlists and 2 buttons in visualforce page and the buttons are Add and Remove.

The first picklist has some fields, and when I select some fields and click on Add button than these selected fields should be moved into second picklist (right side).

As well as if I select fields from second picklist and click on the Remove button then it should move the selected fields from second picklist (rightside) to first picklist (left side).

I have not been able to work out the logic for the action methods which deal with the particular selected fields, how can I get the selected fields?

Visualforce Page:

<apex:page controller="GenerateCode">
<apex:form id="f1">
    <apex:sectionHeader title="Code Generating" subtitle="By VF"/>
    <apex:pageBlock tabStyle="Contact">
        <apex:pageBlockSection title="Add Fields" collapsible="false" columns="4">
            <apex:selectList value="{!fields}" multiselect="true" size="3">
                <apex:selectOptions value="{!aidfields}"/>
            <apex:outputPanel >
            <apex:commandButton value="Add" style="margin-right:650px;margin-left:10px;" reRender="f1" action="{!add}"/>
            <apex:commandButton value="Remove" style="margin-top:15px;margin-right:650px;" reRender="f1" action="{!remove}"/>                
            <apex:selectList value="{!rghtslst}" multiselect="true" size="3" style="margin-left:-650px;">
                <apex:selectOptions value="{!selectedfields}"></apex:selectOptions>

Controller Apex Class:

public class GenerateCode {

public String fields { get; set; }
 List<SelectOption> optns=new List<SelectOption>();
public List<SelectOption> getAidfields() {

    optns.add(new SelectOption('FirstName','FirstName'));
    optns.add(new SelectOption('LastName','LastName'));
    optns.add(new SelectOption('Email','Email'));
    optns.add(new SelectOption('Phone','Phone'));                        
    return optns;

public String rghtslst { get; set; }

  List<Selectoption> slctoption= new List<Selectoption>();
  public List<Selectoption> getSelectedfields() {

    return null;

public PageReference add() {
//           slctoption.addall(fields);
    return null;

public PageReference remove() {
    return null;

Well seems like you are looking for a similar functionality like a standard one but with the exception you want picklist values to be populated from the controller.

Well there was a blog regarding the same, you can check the same here. This will give you something like a standard multi-select component.

enter image description here

| improve this answer | |

If you bind a VF inputField control to an actual SObject's multi-picklist field, you get this functionality for free. It's worth creating a hidden/dummy field just for this purpose.

| improve this answer | |

At your side i would take this example as a template to create multiselect picklist functionallity: http://www.salesforce.com/us/developer/docs/pages/Content/pages_dynamic_vf_sample_standard.htm

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.