function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
anthonyleeanthonylee 

show and hide div when value is selected from custome list fields - jQuery and Visualforce

I am trying to show and hide <div> when a drop down from a list from a custom field.

 

For example, if I have a dropdown value of

1) value 1

2) value 2

3) value 3

 

When I select value 3, it will show a hidden <div> with jQuery in visualforce page.

 

I can do this in the standard html page, using ids and classes—but I don't know how to put id's or classes' on value 3 because it is a custome field from salesforce...

Navatar_DbSupNavatar_DbSup

Hi,

 

Try the below code snippet as reference:

 

<apex:page >

<script>

function displaydiv(val)

{

 

    if(val=='value3')

    {

        document.getElementById('chk').style.display='block';

    }

    else

    {

        document.getElementById('chk').style.display='none';

    }

}

</script>

    <apex:form >

        <apex:selectList id="chooseColor"  onchange="displaydiv(this.value)" size="1">

            <apex:selectOption itemValue="value1" itemLabel="value 1"/>

            <apex:selectOption itemValue="value2" itemLabel="value 2"/>

            <apex:selectOption itemValue="value3" itemLabel="value 3"/>

        </apex:selectList>

    </apex:form>

    <div id="chk" style="display:none;">

    hello

    </div>

</apex:page>

 

Did this answer your question? If not, let me know what didn't work, or if so, please mark it solved. 

 

 

Alok_NagarroAlok_Nagarro

Hi,

 

Plz refer the below code sample :

 

<apex:page controller="myController">

<script>
function doChange(thiss)
{
 if(thiss.value == 'Test3')
  document.getElementById("myid").style.visibility="visible";
 else
  document.getElementById("myid").style.visibility="hidden";
}
</script>

 

    <apex:selectList value="{!test}" size="1" onchange="doChange(this);">
      <apex:selectOption itemLabel="Test1" itemValue="Test1"></apex:selectOption>
      <apex:selectOption itemLabel="Test2" itemValue="Test2"></apex:selectOption>
      <apex:selectOption itemLabel="Test3" itemValue="Test3"></apex:selectOption>
    </apex:selectList>
    
    <div id="myid" style="visibility:hidden">
    <apex:outputLabel >Hi</apex:outputLabel>
    </div>

</apex:page>

Prince_sfdcPrince_sfdc
Hi , 

What if a selected value of a dropdown on vf page is to be displayed.

 I have a dropdown, I selected one value and I'm trying to show the div content , and div content is selected value on dropdown.
                         
                         <div id="selectedValueSection">
                             {!selectedValue} // This is the issue, that selectedValue is not displayed but a static text 'Hello' is displayed, means                                                                               // {!selectedValue } doesn't get value. Please suggest here how to get the selected value from dropdown?
                             <p> Hello </p> 
                            </div>

and in Java script function is onChange of dropdown: 
                             <apex:selectList id="pickList_Id" value="{!selectedValue}" multiselect="false" size="3"                                onChange="hideShowSelectedValueSection(this)">
                                <apex:selectOptions value="{!mapIpsShown[mapVar]}">
                                </apex:selectOptions>

And java script method is: 
<script>
            function hideShowSelectedValueSection(selectedIp){
            var showOrHide= document.getElementById("selectedValueSection");
            var selectedValue=selectedIp.value;
            if(selectedIp==""){
                alert('Please select an Installed Product');
                var showOrHide=document.getElementById("selectedValueSection").style.display='none';
            }
            else{
                document.getElementById("selectedValueSection").style.display='block';
                //alert('Selected Installed Product '+selectedValue+' show or Hide: '+showOrHide);
                //alert(document.getElementById("selectedValueSection").style.display);
            }
        }
</script>
Prince_sfdcPrince_sfdc
Hi, 

I know in the above question that I asked,  {!selectedValue } doesn't get value because it is not yet set in controller and on click of a button that calls a method of controller, then it gets a value and value gets displayed.
But what do you think about any alternative, where I do not need controller intervention, just selection of a picklist value shows in the div using javascript??
Adrian Robinson 4Adrian Robinson 4
@Navatar_DbSup 
Thanks, this worked for me :0)