3

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>.

2

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;
    }   
}
  • Many Thanks @SarojBera, already test it and it's perfect ! but i just know that multi-select picklist can be grouped in report. any suggestion? – Febrian Tarigan Jan 7 '16 at 4:46
4

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

  • Thanks @Ratan, i try using your code but somehow i get null input to JSON parser error. but when i saw in debug log, your lst get all the values. did i do it wrong ? – Febrian Tarigan Jan 7 '16 at 4:50
  • 1
    @FebrianTarigan Can you just create a new VF page and class with my above code and try. check it is working or not. ? The reason I am saying I have tested this. Reason can be with your existing code. If above saroj code is working then defiantly it should work .. I think you may forgot to use <apex:param name="selectArray" value="" assignTo="{!banks2SF}" /> in actionFunction you can use this in apex:commandbutton – Ratan Paul Jan 7 '16 at 4:53
2

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;
}
  • Hi @Keith, i can't use apex:selectList because it make my page look worse even i styling with styleClass. i already try using select list and i can get the value. So i need do it with html select tag. – Febrian Tarigan Jan 6 '16 at 10:02
  • 1
    @FebrianTarigan OK. Personally I would persevere with the styling (e.g. try using !important) for the sake of cleaner code. – Keith C Jan 6 '16 at 10:06

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.