disable dropdown2 when dropdown1 is not filled

Question

In VF page, i have three drop downs.I have to disable drop2 and drop3 when drop1 is not filled.I am using <select> element?

Please help

Answer 1

What you need is the combination of apex:selectList and apex:actionFunction.

1. In your controller, create a boolean variable 'dropdownDisable' and set it to true.

2. Show the select list on Visualforce page using apex:selectList. For dropdown2 and dropdown3, set disabled = {!dropdownDisable} which is true. Dropdown2 and dropdown3 would be disabled.

3. For dropdown1, use onselect to call 'enableDropdown()' javascript function.

4. In enableDropdown(), call the actionFunction to set dropdownDisable in your controller to false. You might need a piece of apex code that will check that dropdown1 are really filled. Then rerender the dropdown lists.

Answer 2

Can you please try this..May this helps you. Im not good at programming. I just tried it...

<apex:page standardController="Account">
<apex:form id="form">
  <script>
      var windowOnload = window.onload;
      window.onload=function(){
          if(document.getElementById('{!$Component.form.pb.pbs.type}').value == '')
          {
              document.getElementById('{!$Component.form.pb.pbs.ind}').disabled=true;
              document.getElementById('{!$Component.form.pb.pbs.rating}').disabled=true;  
          }
      }
      function r(obj)
      {
          if(obj.selectedIndex == 0)
          {
              document.getElementById('{!$Component.form.pb.pbs.ind}').selectedIndex=0;
              document.getElementById('{!$Component.form.pb.pbs.rating}').selectedIndex=0; 
              document.getElementById('{!$Component.form.pb.pbs.ind}').disabled=true;
              document.getElementById('{!$Component.form.pb.pbs.rating}').disabled=true;  
          }
          else
          {
              document.getElementById('{!$Component.form.pb.pbs.ind}').disabled=false;
              document.getElementById('{!$Component.form.pb.pbs.rating}').disabled=false;  
          }
      }
  </script>
  <apex:pageBlock id="pb">
      <apex:pageBlockSection id="pbs">
          <apex:InputField Value="{!Account.Type}" id="type" onchange="r(this);" />
          <apex:InputField Value="{!Account.Industry}" id="ind" />
          <apex:InputField Value="{!Account.Rating}" id="rating" />  
      </apex:pageBlockSection>
  </apex:pageBlock>
 </apex:form>
</apex:page>

Just check the preview...Instead of 'apex:InputField' you can use 'select'.