+ Start a Discussion
sukumar pithanisukumar pithani 

based on picklist value how to display fields

in a picklist field there are two values value1 and value2. by selecting the values in picklist value1 will display fields text1,text2 and value 2 will display text3 and text4.how can achieve this ..
Pun!5h3rPun!5h3r
VF Page
<div rendered="{!flag1}">
    <text1/>
    <text2/>
</div>

<div rendered="{!flag2}">
    <text3/>
    <text4/>
</div>

<apex:selectList onchange="{!setFlag}" />
Controller
public boolean flag1{get;set;}
public boolean flag2{get;set;}

public void setFlag(){
     if(picklist value == "xxx"){
         flag1=true;
         flag2=false;
     }
     if(picklist value == "yyy"){
         flag2=true;
         flag1=false;
    }
}


Please Mark as best answer if It helps
 
sukumar pithanisukumar pithani
the values arent hide..can u check this syntx
public class picklistField {
    public string company{get;set;}
    public string busiEmp{get;set;}
    public integer salEmp{get;set;}
    public integer annualinc{get;set;}
    
    public boolean flag1{get;set;}
    public boolean flag2{get;set;}
    
    public string employment{get;set;}
    
    public list<SelectOption> getemployments(){
       list<SelectOption> sList = new list<SelectOption>();
        sList.add(new SelectOption('none','--none--'));
        sList.add(new SelectOption('sal','salary'));
        sList.add(new SelectOption('busi','business'));
        return sList;
        
    }
    public void setFlag(){
        if(employment == 'sal'){
            flag1 = true;
            flag2 = false;
        }
        else if(employment == 'busi'){
            flag1 = false;
            flag2 = true;
        }
    }

}

============vf page
<apex:page controller="picklistField">
     <apex:form>
   
    <apex:pageblock>
       <apex:pageBlockSection>
        <apex:selectlist size="1" value ="{!employment}" >
            <apex:selectOptions value="{!employments}"/>
               <apex:actionSupport event="onchange" action="{!setFlag}"/>            
            </apex:selectlist>
      </apex:pageBlockSection>
        <apex:pageblocksection>
            
        <div rendered="{!flag1}">
        <apex:inputtext label = "salary" value ="{!salEmp}"  />
        <apex:inputtext label="company" value = "{!company}"/>
    </div>
                   
    <div rendered ="{!flag2}">
        <apex:inputtext label="annual income" value="{!annualinc}"/>
        <apex:inputText label="business" value="{!busiEmp}"/>
    </div>
           </apex:pageblocksection>
        </apex:pageblock>
        
        
    </apex:form>
</apex:page>
Pun!5h3rPun!5h3r
Make the following change in your code
<apex:actionSupport event="onchange" action="{!setFlag}" rerender="id1,id2"/>      
<div id="id1" rendered ="{!flag2}">
<div id="id2" rendered ="{!flag2}">


 
Akshay_DhimanAkshay_Dhiman
Hi Sukumar,

Just try This Below code, Hope it works for you
 
<apex:page>
            <head>
                <script>
                window.onload=function()
                {
                    document.getElementById("form1").style.display='none'; 
                    document.getElementById("form2").style.display='none'; 
                    document.getElementById("form3").style.display='none'; 
                }
                function myFunction()
                {
                    var pick= document.getElementById("picvalue").value;
                    if(pick == 'select')
                    {
                        document.getElementById("form1").style.display='none'; 
                        document.getElementById("form2").style.display='none'; 
                        document.getElementById("form3").style.display='none';
                    }
                    else if(pick == '1')
                    {
                        document.getElementById("form1").style.display='block'; 
                        document.getElementById("form2").style.display='none'; 
                        document.getElementById("form3").style.display='none';
                    }
                    else if(pick == '2')
                    {
                        document.getElementById("form1").style.display='none'; 
                        document.getElementById("form2").style.display='block'; 
                        document.getElementById("form3").style.display='none';
                    }
                    else if(pick == '3')
                        {
                        document.getElementById("form1").style.display='none'; 
                        document.getElementById("form2").style.display='none'; 
                        document.getElementById("form3").style.display='block';
                    }
                }
                </script>
            </head>
            <apex:form>
                <select id='picvalue' onchange="myFunction()">
                <option value="select">...Select...</option>
                <option value="1">Login Form</option>
                <option value="2">Registration Form</option>
                <option value="3">WELCOME form</option>
            </select>
            </apex:form>
            <div id='form1'>
                    <fieldset>
                    <legend>Login Form</legend>
                    <pre>    
                    <form>
                         Enter the name:     <input type="text"><br/>
                         Enter the Password: <input type="password"><br/>
                         <button>Login</button>
                    </form>
                     </pre>
                    </fieldset> 
            </div>
            <div id='form2'>
                    <fieldset>
                    <legend>Registration Form</legend>
                    <pre>    
                    <form>
                         Enter the name:     <input type="text"><br/>
                         Enter the email:    <input type="text"><br/>
                         Enter the phone:    <input type="number"><br/>
                         Enter the address:  <input type="text"><br/>
                         Enter the Password: <input type="password"><br/>
                         <button>Registration</button>
                    </form>
                    </pre>
                    </fieldset> 
            </div>
            <div id='form3'>
                    <legend>WELCOME Form</legend>
                    <center>  
                    <form>
                        <h1 style="color: red;font-size:50px; ">WELCOME</h1>
                    </form>
                    </center>
                    </fieldset> 
            </div>    
        </apex:page>

Thanks 
Akshay