Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
BridgetreeBridgetree 

multiselect picklist values to textbox

Hey i have one small problem...

 

          i have  a picklist. I want to get the selected values in a textbox delimited by a ' , ' 

   Please suggest some code... 

 

tried using all javascript.. not working... Stuck in middle...

 

Pls save...

Best Answer chosen by Admin (Salesforce Developers) 
Shashikant SharmaShashikant Sharma

I just prepared one example try this

 

Controller

 

public class mutiselectListDemo 
{
    private List<SelectOption> multiSelectOptionList =  new List<SelectOption>();
   
    public mutiselectListDemo()
    {
        multiSelectOptionList.add(new SelectOption('Option1' , 'Option1'));
        multiSelectOptionList.add(new SelectOption('Option2' , 'Option2'));
        multiSelectOptionList.add(new SelectOption('Option3' , 'Option3'));
        multiSelectOptionList.add(new SelectOption('Option4' , 'Option4'));
        multiSelectOptionList.add(new SelectOption('Option5' , 'Option5'));
    }

    public string selectedOptions {get;set;}
    public List<String> selectedOptionsList
    {   
        get; 
        set
            {
                selectedOptions = null;
                if(value != null && value.size() > 0)
                    {
                        Boolean addSeperater = false;
                        for(String le : value)
                            {
                                if(addSeperater)
                                    selectedOptions = selectedOptions + ',' + le;
                                else
                                    {
                                        selectedOptions = le;
                                        addSeperater = true;
                                    }
                            }
                    }
            }
    }
    public List<SelectOption> multiSelectOptions
        {   
            get
                {
                    return multiSelectOptionList;
                }
            set;
        }



}

 VFP

 

<apex:page controller="mutiselectListDemo">
  <apex:form>
  <apex:pageBlock>
      <apex:commandButton value="Check Selection" action="{!showSelected}"/>
      <apex:pageBlockSection>
          
          <apex:selectList value="{!selectedOptionsList}" size="4" multiselect="true">
                <apex:selectOptions value="{!multiSelectOptions}" />
          </apex:selectList>
      
      </apex:pageBlockSection>
  
      <apex:pageBlockSection>
      <apex:pageBlockSectionItem>
      <apex:outputLabel value="Selected Values"> </apex:outputLabel>
      <apex:inputText id="txtBox"/>
      </apex:pageBlockSectionItem>
      </apex:pageBlockSection>
      
  </apex:pageBlock>
  </apex:form>
  <script>
      document.getElementById('j_id0:j_id1:j_id2:j_id7:j_id8:txtBox').value = '{!selectedOptions}';
  </script>
</apex:page>

 

 

 

I hope this will help you.

All Answers

Shashikant SharmaShashikant Sharma

I just prepared one example try this

 

Controller

 

public class mutiselectListDemo 
{
    private List<SelectOption> multiSelectOptionList =  new List<SelectOption>();
   
    public mutiselectListDemo()
    {
        multiSelectOptionList.add(new SelectOption('Option1' , 'Option1'));
        multiSelectOptionList.add(new SelectOption('Option2' , 'Option2'));
        multiSelectOptionList.add(new SelectOption('Option3' , 'Option3'));
        multiSelectOptionList.add(new SelectOption('Option4' , 'Option4'));
        multiSelectOptionList.add(new SelectOption('Option5' , 'Option5'));
    }

    public string selectedOptions {get;set;}
    public List<String> selectedOptionsList
    {   
        get; 
        set
            {
                selectedOptions = null;
                if(value != null && value.size() > 0)
                    {
                        Boolean addSeperater = false;
                        for(String le : value)
                            {
                                if(addSeperater)
                                    selectedOptions = selectedOptions + ',' + le;
                                else
                                    {
                                        selectedOptions = le;
                                        addSeperater = true;
                                    }
                            }
                    }
            }
    }
    public List<SelectOption> multiSelectOptions
        {   
            get
                {
                    return multiSelectOptionList;
                }
            set;
        }



}

 VFP

 

<apex:page controller="mutiselectListDemo">
  <apex:form>
  <apex:pageBlock>
      <apex:commandButton value="Check Selection" action="{!showSelected}"/>
      <apex:pageBlockSection>
          
          <apex:selectList value="{!selectedOptionsList}" size="4" multiselect="true">
                <apex:selectOptions value="{!multiSelectOptions}" />
          </apex:selectList>
      
      </apex:pageBlockSection>
  
      <apex:pageBlockSection>
      <apex:pageBlockSectionItem>
      <apex:outputLabel value="Selected Values"> </apex:outputLabel>
      <apex:inputText id="txtBox"/>
      </apex:pageBlockSectionItem>
      </apex:pageBlockSection>
      
  </apex:pageBlock>
  </apex:form>
  <script>
      document.getElementById('j_id0:j_id1:j_id2:j_id7:j_id8:txtBox').value = '{!selectedOptions}';
  </script>
</apex:page>

 

 

 

I hope this will help you.

This was selected as the best answer
BridgetreeBridgetree

Thanks for the code... hope this will help me... But couldn't understand

 

                if(value != null && value.size() > 0)

 

where is this 'value' coming from???? 

Can you please elaborate
BridgetreeBridgetree

Thanks for the code... hope this will help me... But couldn't understand

 

                if(value != null && value.size() > 0)

 

where is this 'value' coming from???? 

Can you please elaborate. I am new to apex
Shashikant SharmaShashikant Sharma

If you see this

<apex:selectList value="{!selectedOptionsList}" size="4" multiselect="true">
                <apex:selectOptions value="{!multiSelectOptions}" />
          </apex:selectList>

 selectedOptionsList property is binded with apex:selectList control , in getter when the page is submitted to server, all properties are binded with page control like apex:selectlist in this case. In setter method you can retrieve that value

as I have use directly using value, 

 

if(value != null && value.size() > 0) 

 

in this case as we are using multiselect picklist so this value is list of string.

 

 

One more thing I have added javascript also in my earlier post as you wanted to show it in text box so please try that and let me know , i am waiting for you response.
BridgetreeBridgetree

Sir,

 

   i searched for that code in your posts but could find it.. Can You pls make a small time and give me link..

 

Purpose fully i want this operation to happen on javascript only.

 

Please

 

 
Shashikant SharmaShashikant Sharma

this was the part I was referening in my post this will add seleted value in text box

 

<script>
      document.getElementById('j_id0:j_id1:j_id2:j_id7:j_id8:txtBox').value = '{!selectedOptions}';
  </script>

 to see this example running go to

 

http://metacubepoc-developer-edition.ap1.force.com/multiSlectDemo
BridgetreeBridgetree

This demo is perfect. I have Two queries

 

The options are hard coded. I mean if i want any valu in pick list is to be added or removed i have to do it in coding level.

Can You make it dynamic?

 

And this script coding i need to call it in some action. Can u suggest that change also?

 

Please.

 
Shashikant SharmaShashikant Sharma

Your Questions :



Ans 1 :

I used hard coded options just for demo purpose , you can add options dynamically as well just need to add values in

 

multiSelectOptionList 

 

Change code to this

public class mutiselectListDemo 
{
    private List<SelectOption> multiSelectOptionList =  new List<SelectOption>();
   
    public mutiselectListDemo()
    {
        multiSelectOptionList.add(new SelectOption('Option1' , 'Option1'));
        multiSelectOptionList.add(new SelectOption('Option2' , 'Option2'));
        multiSelectOptionList.add(new SelectOption('Option3' , 'Option3'));
        multiSelectOptionList.add(new SelectOption('Option4' , 'Option4'));
        multiSelectOptionList.add(new SelectOption('Option5' , 'Option5'));
    }

    public string selectedOptions {get;set;}
    
    
    
    // this will set value separated by ','
    public List<String> selectedOptionsList
    {   
        get; 
        set
            {
                selectedOptions = null;
                if(value != null && value.size() > 0)
                    {
                        Boolean addSeperater = false;
                        for(String le : value)
                            {
                                if(addSeperater)
                                    selectedOptions = selectedOptions + ',' + le;
                                else
                                    {
                                        selectedOptions = le;
                                        addSeperater = true;
                                    }
                            }
                    }
            }
    }
    public List<SelectOption> multiSelectOptions
        {   
            get
                {
                    return multiSelectOptionList;
                }
            set;
        }

    public PageReference showSelected()
        {
            return ApexPages.currentPage();
        }

     public string newOption{get;set;}
     public PageReference  addOption()
         {
            if(newOption != null && newOption.length() > 0)
            multiSelectOptionList.add(new SelectOption(newOption , newOption));
            newOption  = null;
            return ApexPages.currentPage();
        }
}

 

VFP

<apex:page controller="mutiselectListDemo">
  <apex:form >
  <apex:pageBlock >
  
      <apex:commandButton value="Check Selection" action="{!showSelected}"/>
      <apex:commandButton value="Add New Option" action="{!addOption}"/>
      <apex:pageBlockSection >
          
          <apex:selectList value="{!selectedOptionsList}" size="4" multiselect="true">
                <apex:selectOptions value="{!multiSelectOptions}" />
          </apex:selectList>
      
      </apex:pageBlockSection>
      
      <apex:pageBlockSection >
          <apex:pageBlockSectionItem >
              <apex:outputLabel value="New Option"> </apex:outputLabel>
              <apex:inputText id="txtBoxNewOption" value="{!newOption}"/>
          </apex:pageBlockSectionItem>
      </apex:pageBlockSection>
      
      
      <apex:pageBlockSection >
      <apex:pageBlockSectionItem >
      <apex:outputLabel value="Selected Values"> </apex:outputLabel>
      <apex:inputText id="txtBox"/>
      </apex:pageBlockSectionItem>
      </apex:pageBlockSection>
      
  </apex:pageBlock>
  </apex:form>
  <script>
      document.getElementById('j_id0:j_id1:j_id2:j_id11:j_id12:txtBox').value = '{!selectedOptions}';
  </script>
</apex:page>

 

Added a button to add options dynamically.

See this again : 

https://c.ap1.visual.force.com/apex/multiSlectDemo

 

Ans 2 : You can use '{!selectedOptions}' at any place in any action this will always give yoy , separated selected values.
BridgetreeBridgetree

excellent sir... we are adding the option are later stage. But i want the options to fill in which is already existing.

 

I have a multipicklist field. I am selecting some values in that. Later when i click button i want the selected options in the 

textbox.

 

requirement is bit diff

 

SIr, i am in almost at bank of river. Pull me over to land..

 

Please

 

 
Shashikant SharmaShashikant Sharma

Can you explain this : we are adding the option are later stage. But i want the options to fill in which is already existing

Do you want to add option at top of the list means at 0th index of the list. Or you want this option to replace first option.

 



I have a multipicklist field. I am selecting some values in that. Later when i click button i want the selected options in the 

textbox. : I think this we hae alrady achieved , seleted value is coming in the text box

 

Don't worry your we both can try to solve this , you will soon see land.

 
BridgetreeBridgetree

sir, i have multi picklist field called Cities. 

Now i will get this field on visualforce page 

so it appears in two blocks

 

Available and chosen.

 

values are selected from available and put into chosen.

 

Now i have a button which should do the operation of fetching chosen values and copy into text box delimeted by ' , '

 

When multi picklist filed value is used, u will have that Available and chosen box. 

 

I think you have got correct picture.

 

Let me know sir if i am wrong.

 

 
Shashikant SharmaShashikant Sharma

See this demo now, Is this what you want. Took some time to achieve this.

 

http://metacubepoc-developer-edition.ap1.force.com/multiSelectComponentPage

 

 
BridgetreeBridgetree

Excellent coding sir, Thank you so much. 

I think there is a sort of mis understanding. Unfortunately i am not able to post the image here. So i am sending the 

link

 

http://www.gamefront.com/files/20566707/Multi.JPG

 

In the image if you can see, there is exactly the same kind of what you have coded. 

But it is a Picklist (Multi-Select) field i am refering. When this field is taken in edit page, it appears as shown in image.

 

I want the chosen fields there to appear in the textbox when set is clicked.

 

Please let me know if i can provide you any more details. I am sorry for late reply.
BridgetreeBridgetree

Hi Sir,

 

         I have great news for you. I implemented my requirement. this happened because of  your code only. I used peices

of your code in my implementation and its working great.

 

Thank you so much. Thanks alot for spending your precious time in implementing this.

 

phanirajnadiger@gmail.comis my mail id. If possible please add my contact to yours. 

Will be waiting to hear from you. 
s-Forces-Force

Hello Sir,

 

i have just check your code, excellent work done by you. but problem am facing in button check selection. i have also check your demo link in that its working fine. but when am trying it with your given code its not doing anything.

 

Will you please tell me where is the problem.

 

Thanks

Neeru Nagpal
sunny198218sunny198218

Hi,

 

I want to replicate similar fucntionality. When i click on link i can see the demo but not the code. Please advice.

 

Thanks
BridgetreeBridgetree

You mean that the selected picklist values should come to a text box???
SFDC_LearnerSFDC_Learner
  • Can you plz share this sample..
samasama
HI,
The best choosen answer is working fine..but i want to display custom multipicklist field instead of those hardcore picklist values.Can anyone help me on, how to use  custom field here?

Thanks,