Apex Code Development You need to sign in to do that
Don't have an account?
Mishu Bhat How can we show/hide a div based on a picklist value in lightning?
I want to show/hide a div that contains an input field, based on the picklist value in lightning:
CMP:
<div class="slds-col">
<lightning:select class="select-auto-width" name="selectEmailPreference" aura:id="selectEmailPreference" label="Current Email Preference" required="true" onchange="{!c.setEmailPreference}">
<option value="1">No Email Updates</option>
<option value="2">Send all Email Updates</option>
<option value="3">Send Critical Updates and Fixes Only</option>
</lightning:select>
Show this div only when the value is either option 2 or option 3
<div class="slds-col">
<lightning:layoutItem size="4">
<lightning:input type="email" label="Current Email"/>
</lightning:layoutItem>
</div>
CMP:
<div class="slds-col">
<lightning:select class="select-auto-width" name="selectEmailPreference" aura:id="selectEmailPreference" label="Current Email Preference" required="true" onchange="{!c.setEmailPreference}">
<option value="1">No Email Updates</option>
<option value="2">Send all Email Updates</option>
<option value="3">Send Critical Updates and Fixes Only</option>
</lightning:select>
Show this div only when the value is either option 2 or option 3
<div class="slds-col">
<lightning:layoutItem size="4">
<lightning:input type="email" label="Current Email"/>
</lightning:layoutItem>
</div>
1. Create one more boolean attribute.
2. use the aura:if.
Component:
<aura:attribute name="showdiv" type="boolean" default="false" /> <!-- Change the default Value as per your need -->
<div class="slds-col">
<lightning:select class="select-auto-width" name="selectEmailPreference" aura:id="selectEmailPreference" label="Current Email Preference" required="true" onchange="{!c.setEmailPreference}">
<option value="1">No Email Updates</option>
<option value="2">Send all Email Updates</option>
<option value="3">Send Critical Updates and Fixes Only</option>
</lightning:select>
<aura:if isTrue="{!v.showdiv}">
<div class="slds-col">
<lightning:layoutItem size="4">
<lightning:input type="email" label="Current Email"/>
</lightning:layoutItem>
</div>
</aura:if>
JS Controller:
setEmailPreference: function(component,helper,event){
alert(component.find('selectEmailPreference').get('v.value') + ' is Selected');
var selectValue= component.find('selectEmailPreference').get('v.value');
if(selectValue == '2' || selectValue =='3'){
component.set("v.showdiv", true);
}
else{
component.set("v.showdiv", false);
}
}
Can you please Let me know if it helps or not!!!
If it helps don't forget to mark this as a best answer!!!
Thanks,
Maharajan.C
All Answers
1. Create one more boolean attribute.
2. use the aura:if.
Component:
<aura:attribute name="showdiv" type="boolean" default="false" /> <!-- Change the default Value as per your need -->
<div class="slds-col">
<lightning:select class="select-auto-width" name="selectEmailPreference" aura:id="selectEmailPreference" label="Current Email Preference" required="true" onchange="{!c.setEmailPreference}">
<option value="1">No Email Updates</option>
<option value="2">Send all Email Updates</option>
<option value="3">Send Critical Updates and Fixes Only</option>
</lightning:select>
<aura:if isTrue="{!v.showdiv}">
<div class="slds-col">
<lightning:layoutItem size="4">
<lightning:input type="email" label="Current Email"/>
</lightning:layoutItem>
</div>
</aura:if>
JS Controller:
setEmailPreference: function(component,helper,event){
alert(component.find('selectEmailPreference').get('v.value') + ' is Selected');
var selectValue= component.find('selectEmailPreference').get('v.value');
if(selectValue == '2' || selectValue =='3'){
component.set("v.showdiv", true);
}
else{
component.set("v.showdiv", false);
}
}
Can you please Let me know if it helps or not!!!
If it helps don't forget to mark this as a best answer!!!
Thanks,
Maharajan.C