You need to sign in to do that
Don't have an account?
anthonylee
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...
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.
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>
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>
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??
Thanks, this worked for me :0)