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
Abi V 4Abi V 4 

Javascript not working to show or hide select list based on another select list

<script type="text/javascript">
    function Disablefilter(var1){

   var selectreporttype = document.getElementById('{!$Component.fid:pgBlckId:pgsec:pgsecitem:reportSelList}');
        var selreport = selectreporttype.options[selectreporttype.selectedIndex].value;
       var selectreporttype1 = document.getElementById('{!$Component.fid:pgBlckId:pgsec:pgsecitem:MonthSelList}');   


      if(selreport =='Booked Order MTD')
        {
       
       alert('var1')//entering into if condition but the next line is not working for hidden
             document.getElementById('var1').style.display="hidden";

        }
  }
  </script>

  <apex:selectList id="reportSelList" size="1" value="{!selectedreports}" style=" padding: 2px 4px; margin: 4px 2px;"  onchange="Disablefilter('{!$Component.myid}');" >
   <apex:outputPanel id="myid" >   
        <apex:selectList id="MonthSelList" size="1"  title="List of Months in year" value="{!selectedMonth}"  style=" padding: 2px 4px; margin: 4px 2px;" rendered="{!if((selectedreports =='Booked Order YTD' && agingError=true)||(selectedreports =='Revenue YTD' && disablefilter1=true),True,False)}">
                <apex:selectOption itemvalue="Months" itemLabel="Select a Month" />
                <apex:selectOption itemvalue="1" itemLabel="Completed"/>
                <apex:selectOption itemvalue="2" itemLabel="Open"/>
                     
        </apex:selectList>  
  </apex:outputPanel>
Sumit Kumar Singh 9Sumit Kumar Singh 9
Hello Abi, 

You can alert OR log the value of Var1 and it should be same if you inspect the element though f12. 
I think Id is not beibng populated. That's why it not working.

Thnaks,
Sumit Kumar Singh
Pramod GowdaPramod Gowda
Hi Abi,
I have made some modification to your code. Find the code below. It hides the second selectList when user selects the "Booked Order MTD" .
  
<apex:page controller="autoCompleteCon">
  <script type="text/javascript">
    function Disablefilter(var1){

  var selectreporttype = document.getElementById('{!$Component.myForm.reportSelList}');
        var selreport = selectreporttype.options[selectreporttype.selectedIndex].value;
       var selectreporttype1 = document.getElementById('{!$Component.myForm.MonthSelList}');   

        alert(selreport);
      if(selreport =='Booked Order YTD')
        {
       
       alert('var1')//entering into if condition but the next line is not working for hidden
             document.getElementById(var1).style.display='none';

        }
  }
  </script>
  <apex:form id="myForm">
  <apex:selectList id="reportSelList" size="1" value="{!selectedreports}" style=" padding: 2px 4px; margin: 4px 2px;"  onchange="Disablefilter('{!$Component.myForm.MonthSelList}');" >
       <apex:selectOptions value="{!select1Ops}"></apex:selectOptions>
   </apex:selectList>  
        <apex:selectList id="MonthSelList" size="1"  title="List of Months in year" value="{!selectedMonth}"  style=" padding: 2px 4px; margin: 4px 2px;" >
                <apex:selectOption itemvalue="Months" itemLabel="Select a Month" />
                <apex:selectOption itemvalue="1" itemLabel="Completed"/>
                <apex:selectOption itemvalue="2" itemLabel="Open"/>                     
        </apex:selectList>    
  </apex:form>
</apex:page>


Apex Class

public class autoCompleteCon {
  
 public String selectedreports {get;set;}
 public String selectedMonth {get;set;}
   //Constructor
   public autoCompleteCon() {      
      selectedreports = '-Any-';
      }  
   
   public List<SelectOption> getselect1Ops(){
       List<SelectOption> option = new List<SelectOption>();
       option.add(new SelectOption('-Any-','-Any-'));
       option.add(new SelectOption('Booked Order YTD','Booked Order YTD'));
       option.add(new SelectOption('Revenue YTD','Revenue YTD'));
       option.add(new SelectOption('Test3','Test3'));
       option.add(new SelectOption('Test4','Test4'));
       option.add(new SelectOption('Test5','Test5'));       
       option.add(new SelectOption('Test6','Test6'));
       option.add(new SelectOption('Test7','Test7'));
       return option; 
   }
}

Hope this will help.

Thanks,
Pramod
Pramod GowdaPramod Gowda
+Added
To show the selectlist for other options you can use below JS Code

if(selreport !='Booked Order YTD')
        {
       
       alert('var1')//entering into if condition but the next line is not working for hidden
             document.getElementById(var1).style.display = null;

        }
Abi V 4Abi V 4
Hello all Thanks for your responses.It is working now .Posting here with working code
 <apex:selectList id="reportSelList" size="1"  title="These are the list of reports availabe in NSC" value="{!selectedreports}" style=" padding: 2px 4px; margin: 4px 2px;"  onchange="Disablefilter('{!$Component.MonthSelList}','{!$Component.QuarterSelList}','{!$Component.button2}');" >
             
    function Disablefilter(var1,var2,var3,var4){
                  
             document.getElementById(var1).style.display="None";
             document.getElementById(var2).style.display="None";
             document.getElementById(var3).style.display="None";
             document.getElementById(var4).style.display="None";
  
     
  }