How can show input text as pick-list depends on the another pick-list value in salesforce?

Hi Naveen,

Here is an example with countries and states. First, define your Visulforce Page with the picklists.
You can see that it uses a custom controller and an event “onchange” on country list to change the content of the states list when you select a country.

Here is the code:

<apex:page controller=”ctlDepPickLst”>
<apex:form >
<apex:pageBlock>
<apex:pageBlockSection columns=”2″>
<apex:pageblockSectionItem>
<apex:outputLabel value=”Country”/>
</apex:pageblockSectionItem>
<apex:pageblockSectionItem>
<apex:selectList size=”1″ value=”{!country}”>
<apex:selectOptions value=”{!countries}”/>
<apex:actionSupport event=”onchange” reRender=”a”/>
</apex:selectList>
</apex:pageblockSectionItem>
<apex:pageblockSectionItem>
<apex:outputLabel value=”State”/>
</apex:pageblockSectionItem>
<apex:pageblockSectionItem>
<apex:selectList size=”1″ value=”{!state}” id=”a”>
<apex:selectOptions value=”{!states}”/>
</apex:selectList>
</apex:pageblockSectionItem>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>

Here is the custom controller:

public class ctlDepPickLst {
public String country {get;set;}
public String state {get;set;}

public List<SelectOption> getCountries()
{
List<SelectOption> options = new List<SelectOption>();
options.add(new SelectOption(‘None’,’— Select —‘));
options.add(new SelectOption(‘US’,’United States’));
options.add(new SelectOption(‘IN’,’India’));
return options;
}

public List<SelectOption> getStates()
{
List<SelectOption> options = new List<SelectOption>();
if(country == ‘US’)
{
options.add(new SelectOption(‘CO’,’Colorado’));
options.add(new SelectOption(‘NE’,’Nevada’));
options.add(new SelectOption(‘TE’,’Texas’));
}
else if(country == ‘IN’)
{
options.add(new SelectOption(‘BI’,’Bihar’));
options.add(new SelectOption(‘KE’,’Kerala’));
options.add(new SelectOption(‘MA’,’Manipur’));
}
else
{
options.add(new SelectOption(‘None’,’— Select —‘));
}
return options;
}
}

Hope this helps.

• This reply was modified 9 years, 3 months ago by  Kumar.