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
DeveloperSudDeveloperSud 

How to create two mutually dependent custom picklist in visualforce ?

Hi Guys,
I am working on a new topic where I need to create two mutually dependent picklist in a VFpage using same method used as actionsupport action.The situation is like there will be two picklist and a button to show the last selected value from the picklists. Two picklist will have same value and change in one's value will automatically change other's value too. While implementing it, the issue I am facing is :only the last picklist is controlling the situation means the value selected in the last picklist is displaying only .I am giving the sample code and look of the page.Kindly give me your advise how I can implement it using the same method so that the value change in one picklist will have a change on the other also. 
<apex:page controller="exampleCon1x">
    <apex:form >
        <apex:outputPanel id="one11">
         <apex:selectList id="piclist1" value="{!selectedRecord}"  >
                  <apex:selectOption itemvalue="10" itemLabel="10"/>
                   <apex:selectOption itemvalue="20" itemLabel="20"/>
                   <apex:selectOption itemvalue="50" itemLabel="50"/>
                   <apex:selectOption itemvalue="100" itemLabel="100"/> 
                  <apex:actionSupport event="onchange" action="{!search}" reRender="one11"/>   
         </apex:selectList><p/>
        </apex:outputPanel>
        <apex:outputPanel id="two22">
        <apex:selectList id="picklist2" value="{!selectedRecord}"  >
                   <apex:selectOption itemvalue="10" itemLabel="10"/>
                   <apex:selectOption itemvalue="20" itemLabel="20"/>
                   <apex:selectOption itemvalue="50" itemLabel="50"/>
                   <apex:selectOption itemvalue="100" itemLabel="100"/> 
                  <apex:actionSupport event="onchange" action="{!search}" rerender="two22"/> 
        </apex:selectList><p/>
        </apex:outputPanel>

        <apex:commandButton value="Test" action="{!test}" rerender="out" status="status"/>
        
    <apex:outputPanel id="out">
        <apex:actionstatus id="status" startText="testing...">
            <apex:facet name="stop">
                <apex:outputPanel >
                    <p>You have selected:</p>
                    <apex:dataList value="{!selectedRecord}" var="s">{!s}</apex:dataList>
                </apex:outputPanel>
            </apex:facet>
        </apex:actionstatus>
    </apex:outputPanel>
    </apex:form>
</apex:page>
  
public class exampleCon1x{

    public String selectedRecord{get; set;}
    
                    
    public Pagereference Search()
    {
      return null;
    }         
                 
   public pageReference test(){
   return null;
   }   
}

User-added image
 
Amit Chaudhary 8Amit Chaudhary 8
Please check below post for same
1) http://www.infallibletechie.com/2012/10/dependent-picklist-using-apex-in.html
  
<apex:page controller="sample">
   
    <apex:form >
   
    <apex:pageBlock>
        <apex:pageBlockSection columns="2">
            <apex:pageblockSectionItem>
                <apex:outputLabel value="State"/>
            </apex:pageblockSectionItem>       
            <apex:pageblockSectionItem>               
                <apex:selectList size="1" value="{!state}">
                    <apex:selectOptions value="{!states}"/>
                    <apex:actionSupport event="onchange" reRender="a"/>
                </apex:selectList>               
            </apex:pageblockSectionItem>
            <apex:pageblockSectionItem>
                <apex:outputLabel value="City"/>
            </apex:pageblockSectionItem>           
            <apex:pageblockSectionItem>
                <apex:selectList size="1" value="{!city}" id="a">
                    <apex:selectOptions value="{!cities}"/>
                </apex:selectList>
            </apex:pageblockSectionItem>           
        </apex:pageBlockSection>       
    </apex:pageBlock>

    </apex:form>

</apex:page>
Apex class 
public class sample
{
    public String state {get;set;}
    public String city {get;set;}

    public List<SelectOption> getStates()
    {
        List<SelectOption> options = new List<SelectOption>();
        options.add(new SelectOption('None','--- None ---'));       
        options.add(new SelectOption('TN','Tamil Nadu'));
        options.add(new SelectOption('KL','Kerala'));
        return options;
    }
   
    public List<SelectOption> getCities()
    {
        List<SelectOption> options = new List<SelectOption>();
        if(state == 'TN')
        {      
            options.add(new SelectOption('CHE','Chennai'));
            options.add(new SelectOption('CBE','Coimbatore'));
        }
        else if(state == 'KL')
        {      
            options.add(new SelectOption('COA','Coachin'));
            options.add(new SelectOption('MVL','Mavelikara'));
        }
        else
        {
            options.add(new SelectOption('None','--- None ---'));
        }     
        return options;
    }      
}

Let us know if this will help you

 
DeveloperSudDeveloperSud
Hi Amit,

I checked your code ,It is not my requirement . Here in your code state is controlling picklist and city is dependent to it but my requiremnt is if I change in pickist A as '20' ,picklist B should change to '20' and if I change picklist B to '50',picklist A should also be changed to '50'.I hope the requiremnt is clear now.Thanks for your help.
Amit Chaudhary 8Amit Chaudhary 8
Please try below apex code 
public class sample
{
    public String state {get;set;}
    public String city {get;set;}

    public List<SelectOption> getStates()
    {
        List<SelectOption> options = new List<SelectOption>();
        options.add(new SelectOption('None','--- None ---'));       
        options.add(new SelectOption('10','10'));
        options.add(new SelectOption('20','20'));
        options.add(new SelectOption('30','30'));
        options.add(new SelectOption('50','50'));
        options.add(new SelectOption('100','100'));
        return options;
    }
   
    public List<SelectOption> getCities()
    {
        List<SelectOption> options = new List<SelectOption>();
        if(state == '10')
        {      
            options.add(new SelectOption('10','10'));
        }
        else if(state == '20')
        {      
            options.add(new SelectOption('20','20'));
        }
        else if(state == '30')
        {      
            options.add(new SelectOption('30','30'));
        }
        else if(state == '50')
        {      
            options.add(new SelectOption('50','50'));
        }
        else if(state == '100')
        {      
            options.add(new SelectOption('100','100'));
        }
        else
        {
            options.add(new SelectOption('None','--- None ---'));
        }     
        return options;
    }      
}

NOTE:- you can change the Variable name
 
DeveloperSudDeveloperSud
Hi Amit,
You have made the city picklist dependent to state picklist , change in State is changing the value in City but reverse is not possible with your code .
DeveloperSudDeveloperSud
Got the solution for this problem.It may help someone , so posting this.Javascript is the only answer to this solution it seems.
  
<apex:page controller="sample" id="pg1">  
    <apex:form id="pf1" >
    <script type="text/javascript">
 function myPicklistChanged()
    {
       
        var oppTypeField = document.getElementById('{!$Component.pf1.pb1.a}');
        var oppType = oppTypeField.options[oppTypeField.selectedIndex].value;

        var dependentField = document.getElementById('{!$Component.pf1.pb1.b}');
        var dependentType = dependentField.options[dependentField.selectedIndex].value;
        
        if(oppType=='10'){
         dependentField.value='10';
        }
        else if(oppType=='20'){
         dependentField.value = '20';
        }
        else if(oppType=='50'){
         dependentField.value = '50';
        }
        else if(oppType=='100'){
         dependentField.value = '100';
        }
        else{
        }
        paraFunction(dependentType);
    }
    
   </script>

    <apex:pageBlock id="pb1" >            
                <apex:selectList size="1" value="{!state}"  id="a" onchange="myPicklistChanged();"  >
                 <apex:actionFunction name="paraFunction" action="{!test}"  >    
                  <apex:param id="aname" assignTo="{!state}" value=""  />
                 </apex:actionFunction>
                   <apex:selectOption itemValue="10"  itemLabel="10" />
                   <apex:selectOption itemValue="20"  itemLabel="20" />
                   <apex:selectOption itemValue="50"  itemLabel="50" />
                   <apex:selectOption itemValue="100" itemLabel="100" /> 
                </apex:selectList>   
    
               <apex:selectList size="1" value="{!state}" id="b"  >
                   <apex:selectOption itemValue="10"  itemLabel="10" />
                   <apex:selectOption itemValue="20"  itemLabel="20" />
                   <apex:selectOption itemValue="50"  itemLabel="50" />
                   <apex:selectOption itemValue="100" itemLabel="100" />
                   <apex:actionSupport event="onchange"  action="{!test}" reRender="a"/>
                </apex:selectList>    
     </apex:pageBlock>  
    </apex:form>
</apex:page>
  
public class sample
{
    public String state {get;set;}
    public string selectedValue{get;set;}
    public String city {get;set;}
   
    
    public sample(){
    state=null;
    }
   
    public pageReference test(){
          
         return null;
        }    
}