MultiselectPicklist using Javascript - Visualforce page

Hi Salesforce Dev ,

Now I am going to demonstrate on the handling Multi select Pick list from Javascript on Visual force page.

Here is the code for the Multi select pick list ,

<table>
            <tr>
                <th ><h1 style="margin-left: 150px;">Account Fields</h1> </th>
                <th><h1 style="margin-left: 142px;">Contact Fields</h1> </th>
            </tr>
                <tr>
                    <td>
                            <apex:panelgrid columns="5" id="accpanel" style="margin-top: 10px;margin-left: 20px;"> 
                            <apex:selectList value="{!AccFields}" multiselect="true" size="5" id="accleft" style="width: 142px;height: 89px;">  
                                <apex:selectOptions value="{!AccountFields}"/>
                            </apex:selectList>
                            <apex:panelGroup >
                                <br/>
                                <apex:Commandbutton value=" > " onclick="MoveToRight('{!JSINHTMLENCODE($Component.accleft)}','{!JSINHTMLENCODE($Component.accright)}','Account');return false;" rerender="frm"/>
                                <br/><br/>
                                <apex:Commandbutton value=" < " onclick="MoveToLeft('{!JSINHTMLENCODE($Component.accleft)}','{!JSINHTMLENCODE($Component.accright)}','Account');return false;" rerender="frm"/>
                                <br/><br/>
                            </apex:panelGroup>
                            <apex:selectList id="accright" multiselect="true" size="5" value="{!AccountRightselected}" style="width: 142px;height: 89px;">   
                                <apex:selectOptions value="{!RightAccountFields}"/>
                            </apex:selectlist>
                        </apex:panelgrid>   
                    </td> 
                    <td>
                        <apex:panelgrid columns="5" id="conpanel" style="margin-top: 10px;margin-left: 20px;"> 
                            <apex:selectList value="{!Confields}" multiselect="true" size="5" id="conleft" style="width: 142px;height: 89px;">  
                                <apex:selectOptions value="{!ContactFields}"/>
                            </apex:selectList>
                            <apex:panelGroup >
                                <br/>
                                <apex:Commandbutton value=" > " onclick="MoveToRight('{!JSINHTMLENCODE($Component.conleft)}','{!JSINHTMLENCODE($Component.conright)}','Contact');return false;" rerender="frm"/>
                                <br/><br/>
                                <apex:Commandbutton value=" < " onclick="MoveToLeft('{!JSINHTMLENCODE($Component.conleft)}','{!JSINHTMLENCODE($Component.conright)}','Contact');return false;" rerender="frm"/>
                                <br/><br/>
                            </apex:panelGroup>
                            <apex:selectList id="conright" multiselect="true" size="5" value="{!ContactRightselected}" style="width: 142px;height: 89px;">   
                                 <apex:selectOptions value="{!RightContactFields}"/>
                            </apex:selectlist>
                        </apex:panelgrid> 
                    
                    
                    
                    </td>
                    
                    
                </tr>   
        </table>

Here is the JS code , which will used to move left / right from Multi Select Pick list.

function MoveToRight(leftpickval,rightpickval,type){
            var removeOptions = new Array();
            if(document.getElementById(leftpickval)!=null && document.getElementById(rightpickval)!=null){
                var leftOptions = document.getElementById(leftpickval); 
                var rightOptions =document.getElementById(rightpickval);
                var iCount=0;
                for(var i=0;i<leftOptions.options.length;i++){
                    if(leftOptions.options[i].selected){
                        if(rightOptions.options.length==1 && (rightOptions.options[rightOptions.length-1].value==null || rightOptions.options[rightOptions.length-1].value==''))
                            rightOptions.options[0] = new Option(leftOptions.options[i].text, leftOptions.options[i].value);
                        else
                            rightOptions.options[rightOptions.length] = new Option(leftOptions.options[i].text, leftOptions.options[i].value);
    
                        removeOptions[iCount] = leftOptions.options[i].value;
                        iCount++;
                    }
                }
                for(var i=0;i<removeOptions.length;i++){
                    for(var j=0;j<leftOptions.length;j++){
                        if(leftOptions.options[j].value == removeOptions[i]){
                            leftOptions.remove(j);
                            break;
                        }
                    }
                }
            }
            sortLeftSelect(leftpickval);
            sortRightSelect(rightpickval);
        }
        function MoveToLeft(leftpickval,rightpickval,type){
            var removeOptions = new Array();
            if(document.getElementById(leftpickval)!=null && document.getElementById(rightpickval)!=null){
                var leftOptions = document.getElementById(rightpickval);
                var rightOptions =document.getElementById(leftpickval);
                var iCount=0;
                for(var i=0;i<leftOptions.options.length;i++){
                    if(leftOptions.options[i].selected){
                        if(rightOptions.options.length==1 && (rightOptions.options[rightOptions.length-1].value==null || rightOptions.options[rightOptions.length-1].value==''))
                            rightOptions.options[0] = new Option(leftOptions.options[i].text, leftOptions.options[i].value);
                        else
                            rightOptions.options[rightOptions.length] = new Option(leftOptions.options[i].text, leftOptions.options[i].value);
    
                        removeOptions[iCount] = leftOptions.options[i].value;
                        iCount++;
                    }
                }
                for(var i=0;i<removeOptions.length;i++){
                    for(var j=0;j<leftOptions.length;j++){
                        if(leftOptions.options[j].value == removeOptions[i]){
                            leftOptions.remove(j);
                            break;
                        }
                    }
                }
            
            }
            sortLeftSelect(leftpickval);
            sortRightSelect(rightpickval);
            
        }
  function sortLeftSelect(typeval) {
    var tmpAry = new Array();
    selElem = document.getElementById(typeval);
    for (var i=0;i<selElem.options.length;i++) {
        tmpAry[i] = new Array();
        tmpAry[i][0] = selElem.options[i].text;
        tmpAry[i][1] = selElem.options[i].value;
    }
    tmpAry.sort();
    while (selElem.options.length > 0) {
        selElem.options[0] = null;
    }
    for (var i=0;i<tmpAry.length;i++) {
        var op = new Option(tmpAry[i][0], tmpAry[i][1]);
        selElem.options[i] = op;
    }
    return;
 }  
 function sortRightSelect(typeval) {
    selElem = document.getElementById(typeval);
    var tmpAry = new Array();
    for (var i=0;i<selElem.options.length;i++) {
        tmpAry[i] = new Array();
        tmpAry[i][0] = selElem.options[i].text;
        tmpAry[i][1] = selElem.options[i].value;
    }
    tmpAry.sort();
    while (selElem.options.length > 0) {
        selElem.options[0] = null;
    }
    for (var i=0;i<tmpAry.length;i++) {
        var op = new Option(tmpAry[i][0], tmpAry[i][1]);
        selElem.options[i] = op;
    }
    return;
 } 

Thank you.

Haribabu Amudalapalli