Apex Code Development You need to sign in to do that
Don't have an account?
Arun Chowdary I want to display a picklist field called "state"in the visualforcce page , if i selected any state in that picklist related "city" picklist should display as another picklist??
Guys Pls help, I am new to Salesforce,
In Google, I'm getting a lot of code I did n't understand that,
pls, explain with a simple example.
Any help greatly appreciated,
Thanks In advance,
Arun.
In Google, I'm getting a lot of code I did n't understand that,
pls, explain with a simple example.
Any help greatly appreciated,
Thanks In advance,
Arun.
The solution is simple as I have created a Map here, of String vs List of Strings where Key represents State and
List of strings are the cities associated with the particular State. Rest you can understand with the help of code I have provided
below.
Please do follow the code below for vf and apex class:
Vf page:
<apex:page controller="StateCityPicklistController" showHeader="false" sidebar="false">
<script>
function myPicklistChanged()
{
//alert('hello');
var myPicklistElement = document.getElementById('{!$Component.form1.pb.pbs.myPicklist}');
console.log('::::'+myPicklistElement);
var myPicklistValue = myPicklistElement.options[myPicklistElement.selectedIndex].value;
console.log('>>>>>:::'+myPicklistValue);
CallApexMethod(myPicklistValue);
}
</script>
<apex:form id="form1">
<apex:actionFunction name="CallApexMethod" action="{!showCity1}" reRender="form1">
<apex:param name="selectedcity" assignTo="{!selectedState}" value="" />
</apex:actionFunction>
<apex:pageBlock id="pb">
<apex:pageBlockSection title="StateCityPicklist" collapsible="false" id="pbs">
<apex:selectList multiselect="false" id="myPicklist" size="1" onchange="myPicklistChanged();">
<apex:selectOptions value="{!stateOptionList}" >
</apex:selectOptions>
</apex:selectList>
<apex:selectList multiselect="false" size="1" >
<apex:selectOptions value="{!cityOptionList}" >
</apex:selectOptions>
</apex:selectList>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>
Controller:
public class StateCityPicklistController {
public List<SelectOption> stateOptionList{get;set;}
public List<SelectOption> cityOptionList{get;set;}
public Boolean show1{get;set;}
public Boolean show2{get;set;}
public String selectedState{get;set;}
Map<String,List<String>> cityStateMap=new Map<String,List<String>>();
//put values in map as per your preference
public StateCityPicklistController()
{
stateOptionList= new List<SelectOption>();
stateOptionList.add(new SelectOption('--','--None--'));
stateOptionList.add(new SelectOption('Delhi','Delhi'));
cityStateMap.put('Delhi',new List<String>{'Tughlqabad', 'New Delhi', 'Firozobad'});
stateOptionList.add(new SelectOption('Uttar Pradesh','Uttar Pradesh'));
cityStateMap.put('Uttar Pradesh',new List<String>{'Noida', 'Meerut', 'Agra'});
stateOptionList.add(new SelectOption('Goa','Goa'));
cityStateMap.put('Goa',new List<String>{'Panaji', 'Ponda', 'Mapusa '});
stateOptionList.add(new SelectOption('Rajhasthan','Rajhasthan'));
cityStateMap.put('Rajhasthan',new List<String>{'Jaipur', 'Udaipur', 'Jodhpur'});
stateOptionList.add(new SelectOption('Uk','Uk'));
cityStateMap.put('Uk',new List<String>{'Dehradun', 'Rishikesh', 'Haridwar','Roorkee'});
stateOptionList.add(new SelectOption('Haryana','Haryana'));
cityStateMap.put('Haryana',new List<String>{'Rohtak', 'Faridabad', 'YamunaNagar'});
stateOptionList.add(new SelectOption('Punjab','Punjab'));
cityStateMap.put('Punjab',new List<String>{'Ludhiana', 'Chandigarh', 'Amritsar'});
}
public void showCity1()
{ cityOptionList = new List<SelectOption>();
cityOptionList.clear();
System.debug('selected State:::'+selectedState);
List<String> cities=cityStateMap.get(selectedState);
system.debug('cities:::'+cities);
for(String city:cities){
cityOptionList.add(new SelectOption(city,city));
}
}
}
I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.
Thanks and Regards,
Deepali Kulshrestha
All Answers
If you wish to display City field on State selection you can use the concept of reRendering:
For Instance :
In this example on change of checkbox value the the JS method is called which calls the action function to reRender the page block section with Id = yourText afer executing the controller action which sets the 'flag' <class variable>.
VF :
<apex:page controller=”DisableInputTextCntrl”>
<script>
function myFunction(checkboxId){
var flag = document.getElementById(checkboxId).checked;
callAction(flag);
}
</script>
<apex:form>
<apex:actionFunction name=”callAction” reRender=”yourText” action=”{!changeFlag}”>
<apex:param value=”” name=”flagValue”/>
</apex:actionFunction>
<apex:inputCheckbox id=”yourBox” styleClass=”test” onclick=”myFunction(‘{!$Component.yourBox}’)”/>
<apex:inputText id=”yourText” disabled=”{!(!flag)}”/>
</apex:form>
</apex:page>
Controller :
public class DisableInputTextCntrl {
public boolean flag{get;set;}
public DisableInputTextCntrl(){
flag = false;
}
public void changeFlag(){
flag = boolean.valueOf(ApexPages.currentPage().getParameters().get(‘flagValue’));
}
}
Hope this explains well and you might be able to display City field in place of that input field.
Cheers!!!!
The solution is simple as I have created a Map here, of String vs List of Strings where Key represents State and
List of strings are the cities associated with the particular State. Rest you can understand with the help of code I have provided
below.
Please do follow the code below for vf and apex class:
Vf page:
<apex:page controller="StateCityPicklistController" showHeader="false" sidebar="false">
<script>
function myPicklistChanged()
{
//alert('hello');
var myPicklistElement = document.getElementById('{!$Component.form1.pb.pbs.myPicklist}');
console.log('::::'+myPicklistElement);
var myPicklistValue = myPicklistElement.options[myPicklistElement.selectedIndex].value;
console.log('>>>>>:::'+myPicklistValue);
CallApexMethod(myPicklistValue);
}
</script>
<apex:form id="form1">
<apex:actionFunction name="CallApexMethod" action="{!showCity1}" reRender="form1">
<apex:param name="selectedcity" assignTo="{!selectedState}" value="" />
</apex:actionFunction>
<apex:pageBlock id="pb">
<apex:pageBlockSection title="StateCityPicklist" collapsible="false" id="pbs">
<apex:selectList multiselect="false" id="myPicklist" size="1" onchange="myPicklistChanged();">
<apex:selectOptions value="{!stateOptionList}" >
</apex:selectOptions>
</apex:selectList>
<apex:selectList multiselect="false" size="1" >
<apex:selectOptions value="{!cityOptionList}" >
</apex:selectOptions>
</apex:selectList>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>
Controller:
public class StateCityPicklistController {
public List<SelectOption> stateOptionList{get;set;}
public List<SelectOption> cityOptionList{get;set;}
public Boolean show1{get;set;}
public Boolean show2{get;set;}
public String selectedState{get;set;}
Map<String,List<String>> cityStateMap=new Map<String,List<String>>();
//put values in map as per your preference
public StateCityPicklistController()
{
stateOptionList= new List<SelectOption>();
stateOptionList.add(new SelectOption('--','--None--'));
stateOptionList.add(new SelectOption('Delhi','Delhi'));
cityStateMap.put('Delhi',new List<String>{'Tughlqabad', 'New Delhi', 'Firozobad'});
stateOptionList.add(new SelectOption('Uttar Pradesh','Uttar Pradesh'));
cityStateMap.put('Uttar Pradesh',new List<String>{'Noida', 'Meerut', 'Agra'});
stateOptionList.add(new SelectOption('Goa','Goa'));
cityStateMap.put('Goa',new List<String>{'Panaji', 'Ponda', 'Mapusa '});
stateOptionList.add(new SelectOption('Rajhasthan','Rajhasthan'));
cityStateMap.put('Rajhasthan',new List<String>{'Jaipur', 'Udaipur', 'Jodhpur'});
stateOptionList.add(new SelectOption('Uk','Uk'));
cityStateMap.put('Uk',new List<String>{'Dehradun', 'Rishikesh', 'Haridwar','Roorkee'});
stateOptionList.add(new SelectOption('Haryana','Haryana'));
cityStateMap.put('Haryana',new List<String>{'Rohtak', 'Faridabad', 'YamunaNagar'});
stateOptionList.add(new SelectOption('Punjab','Punjab'));
cityStateMap.put('Punjab',new List<String>{'Ludhiana', 'Chandigarh', 'Amritsar'});
}
public void showCity1()
{ cityOptionList = new List<SelectOption>();
cityOptionList.clear();
System.debug('selected State:::'+selectedState);
List<String> cities=cityStateMap.get(selectedState);
system.debug('cities:::'+cities);
for(String city:cities){
cityOptionList.add(new SelectOption(city,city));
}
}
}
I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.
Thanks and Regards,
Deepali Kulshrestha
Deepali Kulshrestha.
It works and Good Explanation.