Getting selected picklist values and moving them between two lists

Question

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:selectList>
            <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:outputPanel>
            <apex:selectList value="{!rghtslst}" multiselect="true" size="3" style="margin-left:-650px;">
                <apex:selectOptions value="{!selectedfields}"></apex:selectOptions>
            </apex:selectList>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:form>

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

Answer 1

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.

Answer 2

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.

Answer 3

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