+ Start a Discussion
Ravichandra sindheRavichandra sindhe 

Display lightning picklist options based on condition

i need a help to display picklist option based on condition

ex:

 

if(vehicle=='car')
{
display list of cars in lightnig picklist
}
if(vehicle=='bike')
{
display list of bikes in lightnig picklist
}

Ajay K DubediAjay K Dubedi
Hi Ravichandra,
Try This code:
Lightning Comonent:
<aura:component>
    <aura:attribute name="options" type="List" default="[
                                                        {'label': 'Car', 'value': 'Car'},
                                                        {'label': 'Bike', 'value': 'Bike'}
                                                        ]"/>
    <aura:attribute name="radioGrpValue" type="String"/>
    <aura:attribute name="ForCar" type="Boolean" default="false" />
    <aura:attribute name="ForBike" type="Boolean" default="false" />
   
    <lightning:radioGroup name="radioGroup"
                          options="{! v.options }"
                          value="{! v.radioGrpValue }"
                          type="radio"
                          onchange="{! c.getSelectedValue }"/>
   
    <aura:if isTrue ="{!v.ForCar}">
        <lightning:select name="select1" label="Bikes">
            <option value="">choose one...</option>
            <option value="1">CarOne</option>
            <option value="2">carTwo</option>
            <option value="3">CarThree</option>
        </lightning:select>
    </aura:if>
    <aura:if isTrue ="{!v.ForBike}">
        <lightning:select name="select2" label="Cars">
           
            <option value="">choose one...</option>
            <option value="1">BikeOne</option>
            <option value="2">BikeTwo</option>
            <option value="3">BikeThree</option>
        </lightning:select>
    </aura:if>
</aura:component>
Controller:
({
    getSelectedValue : function(component, event, helper) {
        var radioGrpValue = component.get("v.radioGrpValue");
        console.log('radioGrpValue----s',radioGrpValue);
        if(radioGrpValue == 'Car') {
            component.set("v.ForCar", true);
            component.set("v.ForBike", false);
        } else {
            component.set("v.ForCar", false);
            component.set("v.ForBike", true);
        }
    }
})
lightning Application:
<aura:application extends="force:slds" access="global">
    <c:ShowdataBasedOnCondition/>
</aura:application>

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.
Thanks,
Ajay Dubedi
Nagendra Yanadigalla 31Nagendra Yanadigalla 31
Hi Ajay,
Actually, i am very new to lightning. and this code made me easy to understand.

Thanks so much Ajay