On my VF page, I have a main picklist. For a few of those picklist options, if those are selected, I want to then have a new input text field appear on the screen, and if they change the picklist option to something else, then I want that input text field to disappear from the screen. Is that possible? Here is the code so far-- the line that has the "Additional Notes" field in it is what I want to make dependent on the selection in the "Countries" picklist:

<apex:form > <apex:outputPanel id="tstpopup"> <apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!IF(displayPopUp, true, false)}"/>

        <apex:outputPanel styleClass="custPopup" layout="block" rendered="{!displayPopUp}">
          <b><u>Equipment Request</u></b> 
            Before submitting this request, please verify this referral information is correct: 
            <br/> <b> Name: </b>  {!lead.name}
            <br/><b> Facility: </b>  {!lead.facility__r.name}
            <br/><b> Height: </b>  {!lead.height__c}
           <br/> <b> Weight: </b>  {!lead.weight__c}
            <br/> <b> Category: &nbsp; </b>   <apex:selectList size="1" value="{!country}">
                            <apex:selectOptions value="{!countries}"/>
                            <apex:actionSupport event="onchange" reRender="a"/>
            <br/> <b> Size: &nbsp; </b>  <apex:selectList size="1" value="{!state}" id="a">
                                          <apex:selectOptions value="{!states}"/>
                    <br/> <b> Additional Notes: </b>  <apex:inputText id="bbb" style="height:30px;" value="{!freeText}" /> 
             <div align="center"  draggable="false" >
                 Please do not click submit more than once. It takes a few moments to process.
               <apex:commandButton value="Submit" action="{!validateAndRedirect}"/>
               <apex:commandButton value="Cancel" action="{!cancel}"/>

And here is my controller extension (the part relevant to these picklists):

public String country {get;set;}
public String state {get;set;}
public String freeText {get;set;}
public boolean showFreeText {get;set;}

public List<SelectOption> getCountries() {
    List<SelectOption> options = new List<SelectOption>();
    options.add(new SelectOption('','--- Select ---'));        
    options.add(new SelectOption('Bed Frame','Bed Frame'));  
    options.add(new SelectOption('Air Mattress','Air Mattress'));
    options.add(new SelectOption('Wound Vac','Wound Vac'));
    options.add(new SelectOption('Bipap','Bipap'));      
    options.add(new SelectOption('C-pap','C-pap'));      
    options.add(new SelectOption('Wheelchair','Wheelchair'));      
    options.add(new SelectOption('Concentrator','Concentrator'));      
    options.add(new SelectOption('Other','Other'));      
    return options;

public List<SelectOption> getStates() {
    List<SelectOption> options = new List<SelectOption>();
    if(country == 'Bed Frame' || country == 'Air Mattress')
        options.add(new SelectOption('Standard (36 inch)','Standard (36 inch)'));
        options.add(new SelectOption('42 inch wide','42 inch wide'));
        options.add(new SelectOption('48 inch wide','48 inch wide'));
        options.add(new SelectOption('54 inch wide','54 inch wide'));
        options.add(new SelectOption('84 inch long','84 inch long'));
    else if(country == 'Wheelchair') {       
        options.add(new SelectOption('Geri Chair 30 inch','Geri Chair 30 inch'));
        options.add(new SelectOption('Geri Chair 40 inch','Geri Chair 40 inch'));
        options.add(new SelectOption('22 inch','22 inch'));
        options.add(new SelectOption('24 inch','24 inch'));
        options.add(new SelectOption('26 inch','26 inch'));
        options.add(new SelectOption('30 inch','30 inch'));
        options.add(new SelectOption('34 inch','34 inch'));
    else if(country == 'Concentrator') {       
        options.add(new SelectOption('5 Liter','5 Liter'));
        options.add(new SelectOption('10 Liter','10 Liter'));
        options.add(new SelectOption('10 Liter','10 Liter'));
    else {
        options.add(new SelectOption('None','--- Select ---'));

    return options;

public string notesTitle(){
    if (state == 'None' || state == '--- Select ---'){
        notesText = 'Additional Notes: ';
    return notesText;

1 Answer 1


You'll need to add another boolean variable to your controller (like what you did with showFreeText). In the below example I called it showAddi.tionalNotes

    <apex:outputPanel rendered="{!showAdditionalNotes}">
            Stuff to show if rendered is true

This variable should be set to false initially and then updated in a new method in your controller. Something like onCountryChange and then add the logic for which country picklist values should set showAdditionalNotes to True. You will need to add this method in the action parameter of the apex:actionSupport tag so it will be called whenever the country picklist is updated.

   <apex:selectList size="1" value="{!country}">
         <apex:selectOptions value="{!countries}"/>
         <apex:actionSupport event="onchange" reRender="a" action="{!onCountryChange }"/>

Hope this helps! I'd also recommend using Salesforce Lighting Design System to help style your page like other Salesforce pages.

  • Hi Andrew, Thank you so much for your response. I am trying your suggestion, but it does not seem to be working. I added the actionSupport tag, and added the outputpanel to the the page, and added the following method to my controller, but when I choose the "Other" option nothing happens... Does it matter where I place the actionSupport tag on the page? public void onCountryChange (){ if (country == 'Other'){ showAdditionalNotes = true; } }
    – Michael M
    Mar 11, 2021 at 14:58
  • I've edited my answer. The action support tag is already added to the country apex:selectList. My answer now shows how that code block should be updated. Sorry for the confusion. Mar 11, 2021 at 15:12
  • It is still not working. I noticed that the action support tag says reRender = "a". Right now, my second picklist on the page has the id of "a", because if some of the original picklist choices are selected, i need that second picklist to display different options. So the second picklist is also dependent on the original picklist. But I still need that if certain options are selected from the original picklist are selected then a free text input box appears. But I also just tried removing the id ="a" from the 2nd picklist and putting it on the new outputpanel, but that also didn't work
    – Michael M
    Mar 11, 2021 at 15:15
  • 1
    Oh i got it--when i use two separate action support tags (one to rerender the 2nd picklist, and a separate tag to run the controller action) then they both work! Thank you very much
    – Michael M
    Mar 11, 2021 at 15:28
  • Awesome! I was messing around in a sandbox and had success when I had the reRender point at a <apex:form id="form"> tag which was surrounding the entire panel. Happy to help :) Mar 11, 2021 at 15:48

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .