+ Start a Discussion
Pratik PawarPratik Pawar 

want to update custom dependent picklist values using javascript

Hello,

I have two custom picklist on Account with respective values:
First Picklist
Bussiness Segment: VALUES{PACS, IA, SI}
&
Second Picklist 
Applications : VALUES{ PACS-1, PACS-2, PACS-3, IA-1, IA-2, IA-3,} (No values for Segment SI)

Requirement :
Create VF page which will allow user to select Business segment and show available “Applications” based on the Business Segment using JavaScript.
Also, when no application is available for selected Business segment, then show alert message “Applications not available for business segment: Business Segment name” using JavaScript.

NOTE: Don't want to use any Extension or Custom controller. i.e. need to perform using JavaScript only.

First question: Is it possible through JS only?
Second question: what need to change in below JS code?

Currently, Second Picklist is not re-rendering. 

Please help in this issue.


************************************VF PAGE**********************************************
<apex:page standardController="Account">
<script type="text/javascript">
    function displayChildPickValues(selectPick){
        var pickValue = selectPick.options[selectPick.selectedIndex].value;
        if(pickValue == 'SI')alert('Applications not available for business segment: '+pickValue);
        if(pickValue == 'PACS'){
                   for(var x in document.getElementsByClassName("second")[0].options){
                   var m = document.getElementsByClassName("second")[0].options[x].value;
                   if(!m.startsWith("P")){
                   if(!document.getElementsByClassName("second")[0].options[x].hasAttribute("style"))         
                   document.getElementsByClassName("second")[0].options[x].setAttribute("style","hidden:true;");
                  }//End of IF
                }//End of For
        
    }//End of IF
    
    secondPickFun(); //Calling actionFunction
    
 }//End of javascript function
</script>
  <apex:form >
      <apex:pageblock >
          <apex:pageblockSection >
                 <apex:inputField value="{!Account.Name}"/>
                 <apex:inputField value="{!Account.Business_Segment__c}" onchange="displayChildPickValues(this)">
                  <apex:actionFunction reRender="appPick" name="secondPickFun"/> 
                 </apex:inputField> 
                 <apex:inputField value="{!Account.Applications__c}" Styleclass="second" id="appPick"/> 
          </apex:pageblockSection>
      </apex:pageblock>
  </apex:form>
</apex:page>
 
Andrew EchevarriaAndrew Echevarria
Hey Patrick,

Unfortunatey you can't modify the values using just JS. However, I can help you fix your reRendering issue. Instead of naming the inputFIeld appPick, surround it in an <apex:outputPanel> tag and name that Id appPick, see my example below. This should solve your issue.
<apex:outputPanel id="appPick">
   <apex:inputField value="{!Account.Applications__c}" Styleclass="second" /> 
</apex:outputPanel>
Pratik PawarPratik Pawar
@Andrew thanks for your guidance. 

Actually, I wanted to set a css property to the Option values in 2nd picklist depending on a selected value of  controlling picklist(Bussiness Segment).
can you please guide me in that context?
Andrew EchevarriaAndrew Echevarria
Hmm you should be able to enter logic into styleClass, for example, the example below would evaluate the variable "integer" and render the appropriate styleclass depending on if it is greater than 5 or not. Try setting the condition to your own and the appropriate styleclass names.
<apex:inputField value="{!Account.Applications__c}" Styleclass="{!IF(integer> 5, 'class1', 'class2')}" />

 
Pratik PawarPratik Pawar
I got different logic on this. I've just assigned css attribute depend on condition check.
for(var x in document.getElementsByClassName("second")[0].options){
	var m = document.getElementsByClassName("second")[0].options[x].value;
	
	if(m.startsWith(pickValue)){
		document.getElementsByClassName("second")[0].options[x].setAttribute("style","display:list-item;");
	}//End of IF
	else{
			document.getElementsByClassName("second")[0].options[x].setAttribute("style","display:none;");
		}
}//End of For