function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Ankita Gupta 26Ankita Gupta 26 

Display multipicklist using HTML tags in Visualforce Page

I need to display multipicklist using HTML tags in VF page(standard controller on Account)
Multipicklist should show some list of contacts belonging to that account.

I already have a big VF page where I want to replace apex:selectlist with html select tag because apex:selectList is not mobile compatible.

Below is my code, it is not returning Contacts on multipicklist (LHS):

<apex:page standardController="Account" extensions="MultiSelectPicklist_HTML" sidebar="false" lightningStylesheets="{!$User.UIThemeDisplayed == 'Theme4t'}">
    <apex:form id="frm">
        <apex:pagemessages id="pgmsg"/>
        <apex:pageBlock mode="edit" id="PB" >
           <apex:pageBlockSection columns="2" id="pbs1">
            Client Attendee<div style="color:red;font-size:20px;" > * </div>                    
            <apex:actionRegion id="ar">
                <apex:panelGrid columns="4" id="grid1" >
                    <select name="sel1" multiple="multiple" style="width:150px;height:100px;" size="5" value="{!leftselected}">    
                        <apex:repeat value="{!unselectedvalues}" var="con" id="theRepeat1">
                            <apex:selectOption itemValue="{!con.Id}" itemLabel="{!con.Name}" />

                    <apex:panelGroup >
                        <apex:commandButton value=">>" action="{!selectclick}" reRender="grid1"/> <br/><br/>
                        <apex:commandButton value="<<" action="{!unselectclick}" reRender="grid1"/>
                   <select name="sel2" multiple="multiple" style="width:150px;height:100px;" size="5" value="{!rightselected}">    
                        <apex:repeat value="{!selectedvalues}" var="con" id="theRepeat2">
                            <apex:selectOption itemValue="{!con.Id}" itemLabel="{!con.Name}" />



public class MultiSelectPicklist_HTML {
    Public List<string> leftselected{get;set;} 
    public SelectOption[] unselectedvalues {get;set;}
    Public List<string> rightselected{get;set;} 
    public SelectOption[] SelectedValues {get;set;}
    Private String currentAccountId;
  public MultiSelectPicklist_HTML(ApexPages.StandardController controller) {
Account Acc = new Account();
        string aid =  System.currentPageReference().getParameters().get('id');
        currentAccountId = String.valueOf(aid).substring(0, 15);
        System.debug(currentAccountId+' '+aid);
        List<Contact> conList_Acc = new List<Contact>();
        //custom custom multi picklist
        leftselected = new List<String>();       
        rightselected = new List<String>();
        selectedvalues=new List<SelectOption>(); 
        unselectedvalues=new List<SelectOption>();   
        conList_Acc =[Select id,name,Salutation,AccountId,Title from Contact where accountid =:currentAccountId order by Name];
                for(Contact c : conList_Acc){
                    System.debug(String.valueOf(c.AccountId).substring(0, 15));
                    if(String.valueOf(c.AccountId).substring(0, 15) == currentAccountId){                            
                        unselectedvalues.add(new SelectOption(c.Id,c.Name));
    public PageReference selectclick(){
        List<SelectOption>  templeft = new List<SelectOption>();
        for(Selectoption s : unselectedvalues)
                SelectedValues.add (new SelectOption(s.getvalue(),s.getlabel()));                
                templeft.add (new SelectOption(s.getvalue(),s.getlabel()));
        unselectedvalues = templeft;        
        return null;        
    public PageReference unselectclick(){        
        List<SelectOption>  tempRight = new List<SelectOption>();
        for(Selectoption s : selectedvalues)
                unSelectedValues.add (new SelectOption(s.getvalue(),s.getlabel()));                
                tempRight.add (new SelectOption(s.getvalue(),s.getlabel()));
        selectedvalues = tempRight;        
        return null;

Please help me in figuring out the issue .Please advise.
Arun ParmarArun Parmar
Hi Ankita Gupta 26,
You have to include multiple="multiple" attribute in select tag.
Like this,
<select multiple="multiple"></select>
and when you will retrieve these values, it will give an array of selected values.

please mark as best answer if helpful.