function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Megan Moody 10Megan Moody 10 

Display list of selected multi select picklist items in VF page

I'd like to make the display of the selected multi select picklist items more visually friendly in my VF page. Selected values are displayed by dfault like "option 1; option 2; option 6". I'd like it to display in a vertical list like so:

option 1
option 2
option 6

This is only for display purposes. The user doesn't need to add or remove values from the picklist. Is there a way to do this in a VF page? Thanks!
Best Answer chosen by Megan Moody 10
Mudasir WaniMudasir Wani
Hey Megan,

The reason it is showing this way is because salesforce stores the picklist values like that only.
Now you can use following javascript to do it .

Make sure javascript is rendered AFTER HTML element so that ID is found.
  
<!-- Place this code where you want to show these values -->   
<p id="demo"></p>
If you have some dynamic Id generation then you can refer the below link.

https://www.salesforce.com/docs/developer/pages/Content/pages_variables_global_component.htm

//Always place this code after page say at bottom of the page.

  <script>
        var myString = '{!Account.Multiselect__c}';
        var res = myString.replace(new RegExp(';', 'g'), '<br/>');
        document.getElementById("demo").innerHTML =res;        
    </script>


Donot forget to select best answer to make our efforts visible in the developer forum.
Please mark this as solution by selecting it as best answer if this solves your problem, So that if anyone has this issue this post can help

All Answers

Mudasir WaniMudasir Wani
Hi Megha,

Consider that I have created a custom picklist(Multi select) on account with name Multiselect__c
Then you  can use below code to display the same on VF page.

Your URL shoul look like
SalesforceUrl/apex/PageName?ID=accountID

For me it is 
https://c.eu5.visual.force.com/apex/MultiselectPickList?ID=00124000007wD7B

You van use below code to display same  
<apex:page standardController="Account">
    <apex:outputField value="{!Account.Multiselect__c}"></apex:outputField>
</apex:page>
Let me know if you have any issue.


Donot forget to select best answer to make our efforts visible in the developer forum.
Please mark this as solution by selecting it as best answer if this solves your problem, So that if anyone has this issue this post can help
Megan Moody 10Megan Moody 10
Unless I'm missing something, that code just displays the entire string, e.g. "option1; option2; option6". 

I want the string to be parsed and displayed vertically like so:
option1
option2
option6
Mudasir WaniMudasir Wani
Hey Megan,

The reason it is showing this way is because salesforce stores the picklist values like that only.
Now you can use following javascript to do it .

Make sure javascript is rendered AFTER HTML element so that ID is found.
  
<!-- Place this code where you want to show these values -->   
<p id="demo"></p>
If you have some dynamic Id generation then you can refer the below link.

https://www.salesforce.com/docs/developer/pages/Content/pages_variables_global_component.htm

//Always place this code after page say at bottom of the page.

  <script>
        var myString = '{!Account.Multiselect__c}';
        var res = myString.replace(new RegExp(';', 'g'), '<br/>');
        document.getElementById("demo").innerHTML =res;        
    </script>


Donot forget to select best answer to make our efforts visible in the developer forum.
Please mark this as solution by selecting it as best answer if this solves your problem, So that if anyone has this issue this post can help
This was selected as the best answer
Mudasir WaniMudasir Wani
Dear Megan,

Any update whether the code works for you or not.

Please select your answer so that our efforts are visible.
Megan Moody 10Megan Moody 10
That worked perfectly, Mudasir. Thank you!!