pass html multiselect picklist value to controller

Question

i have problem with passing multiselect picklist value to controller, and i want to insert it to picklist(multiselect) field. what should i do to achieve this ?

here's my visualforce

<apex:inputHidden value="{!banks}" id="banksId"/> 
  <select multiple="multiple" onchange="document.getElementById('{!$Component.banksId}').value = this.value;">
        <option value="Standard Chartered;" >Standard Chartered</option> 
        <option value="ANZ;">ANZ</option> 
        <option value="DBS;">DBS</option> 
        <option value="UOB;">UOB</option> 
    </select>

here's my apex class

public PageReference Submit(){

public String[] banks{get;set;}
public String banks2SF{get;set;}
public PageReference Submit(){
if(banks.size()>0){
    for(Integer i=0;i<banks.size();i++){
         banks2SF +=banks[i]+';';
    }
}
web2lead.List_of_Bank__c = banks2SF;
update web2lead;
}

it didn't store the any values, List_of_Bank__c is picklist(multiselect) and it only accept string not an array string. i need use html <select> tag not <apex:SelectList>.

Answer 1

In your code this.value; only pass the current selected value. I have added a JS function getSelectValues to assign all selected values to the hidden variable. Also you option values has semicolon present in it. I have removed them as comma is added as a separator with push function from JS. Hope this helps.

VF Page

<apex:page controller="MutiSelect">
    <script type="text/javascript">
        function getSelectValues(select) {
            var result = [];
            var options = select && select.options;
            var opt;
            for (var i=0, iLen=options.length; i<iLen; i++) {
                opt = options[i];
                if (opt.selected) {
                    result.push(opt.value || opt.text);
                }
            }
            return result;
        }    
    </script>
    <apex:form>
        <apex:inputHidden value="{!banks2SF}" id="banksId"/> 
        <select multiple="multiple" onchange="document.getElementById('{!$Component.banksId}').value = getSelectValues(this);">
            <option value="Standard Chartered;" >Standard Chartered</option> 
            <option value="ANZ">ANZ</option> 
            <option value="DBS">DBS</option> 
            <option value="UOB">UOB</option> 
        </select>
        <apex:commandButton action="{!Submit}" value="Submit"/>
    </apex:form>    
</apex:page>

Controller

Now banks2SF is having all the values comma separated like ANZ,DBS,UOB. Now as per you code I have split it by comma and assign to the banks. The values of the banks can be seen in debug logs.

public class MutiSelect {
    public String[] banks{get;set;}
    public String banks2SF{get;set;}    
    public PageReference Submit(){
        system.debug('++++banks2SF = '+banks2SF);
        banks = banks2SF.split('\\,');
        system.debug('++++banks.size() = '+banks.size());
        //Check for proper assignment
        if(banks.size()>0){
            for(Integer i=0;i<banks.size();i++){
                 system.debug('+++++banks['+i+']='+banks[i]);
            }
        }
        return null;
    }   
}

Answer 2

Solution

Page

<apex:page controller="MutiselectPicklistTest">
    <apex:form>
        <apex:pageBlock>
        <input type="button" onclick="checkselected();" value="click" class="btn"/>
        <script>
        function checkselected(){
          var x=document.getElementById("selectId");
          var selectOptions = [];
          for (var i = 0; i < x.options.length; i++) {
             if(x.options[i].selected ==true){
                  selectOptions.push(x.options[i].value);
              }
          }
          console.log(selectOptions);
          submitAF(JSON.stringify(selectOptions));
        }
        </script>
        <apex:actionFunction action="{!Submit}" name="submitAF" rerender="op">
            <apex:param name="selectArray" value="" assignTo="{!banks2SF}" />
        </apex:actionFunction>
        <apex:outputPanel id="op">
           <select id="selectId" multiple="multiple">
                <option value="Standard Chartered;" >Standard Chartered</option> 
                <option value="ANZ;">ANZ</option> 
                <option value="DBS;">DBS</option> 
                <option value="UOB;">UOB</option> 
            </select>
        </apex:outputPanel>
        </apex:pageBlock>
        </apex:form>
</apex:page>

on click of button first call Javacsript function to get All the selected option. And add all the selected values into javascript array i.e. selectOptions Now call action function and pass the selected option(Using JSON.stringify this will convert the array into JSON string) submitAF(JSON.stringify(selectOptions));

Action function assign that string to banks2SF. now you can access that string into controller.

---

Class

public class MutiselectPicklistTest {
    public String banks2SF{get;set;}
    public PageReference Submit(){
    system.debug('========banks2SF======='+banks2SF);

    List<String> lst = (List<String>) JSON.deserialize(banks2SF, List<String>.class);

    system.debug('=======lst====='+lst);
    return null;
    }
}

You may need to deserlize the JSON string i.e. banks2SF to get all the list string

Answer 3

You don't explain why you can't use apex:selectList. Using that would make for a cleaner (and easier to test) solution and you can still tweak the styling via the style and styleClass attributes:

<apex:selectList value="{!banks}" multiselect="true">
    <apex:selectOption itemValue="Standard Chartered" itemLabel="Standard Chartered"/>
    <apex:selectOption itemValue="ANZ" itemLabel="ANZ"/>
    <apex:selectOption itemValue="DBS" itemLabel="DBS"/>
    <apex:selectOption itemValue="UOB" itemLabel="UOB"/>
</apex:selectList>

public String[] banks{get;set;}
public PageReference Submit(){
    web2lead.List_of_Bank__c = String.join(banks, ';');
    update web2lead;
    return null;
}