+ Start a Discussion
Rebecca Hendricks 3Rebecca Hendricks 3 

multiple picklists in same lightning component

OK. I'm trying to create a lightning component that will calculate the new payment for the user based on what option they choose.  The user inputs the current payment frequency (monthly, semi-monthly, etc.), the amount they are currently paying each payment, and the new frequency they wish to pay (monthly, semi-monthly, etc.)  The user then presses a calculate button and the new payment amount would display.

The issue I'm running in to, is that I have two picklists in the same lightning component, and so the picklists are mirroring each other.  When I select something in Current frequency it sets the New frequency, and vice versa.  After doing some looking, I thought it was perhaps I was trying to use the same function to load both items, so I created a doInit function that calls two separate functions in the .js file to populate the two picklists.  Here's the code I'm working with.

Lightning Component
<aura:component implements="flexipage:availableForAllPageTypes" access="global">
    <aura:attribute name="currOptions" type="List" />
    <aura:attribute name="newOptions" type="List" />
    <aura:attribute name="selectedValue" type="String" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    
    <div class="slds-form">
        <lightning:card >
            <lightning:select name="currPmtType" label="Current Payment Frequency" aura:id="currPmtType" value="{!v.selectedValue}" required="true">
                <aura:iteration items="{!v.currOptions}" var="item">
                    <option text="{!item.label}" value="{!item.value}" selected="{!item.selected}"/>
                </aura:iteration>
            </lightning:select>
            <lightning:input name="currPmtAmt" label="Current Payment Amount" type="number" formatter="currency" required="true"/>
            <lightning:select name="newPmtType" label="New Payment Frequency" aura:id="newPmtType" value="{!v.selectedValue}" required="true">
                <aura:iteration items="{!v.newOptions}" var="opt">
                    <option text="{!opt.label}" value="{!opt.value}" selected="{!opt.selected}"/>
                </aura:iteration>
            </lightning:select>
        </lightning:card>
    </div>
</aura:component>

.js Controller
({
    doInit: function(component, event, helper){
        
        //load current option
        var a = component.get('c.loadCurrOptions');
        $A.enqueueAction(a);
        
        //load new option
        var b = component.get('c.loadNewOptions');
        $A.enqueueAction(b);
    }
    ,
    loadCurrOptions: function(component, event, helper){
        var currOpts = [
            {value: "", label: "" },
            {value: "Monthly", label: "Monthly - 12 pmts annually" },
            {value: "Semi-monthly", label: "Semi-monthly - 24 pmts annually" },
            {value: "Bi-weekly_lower_payment", label: "Bi-weekly - 26 pmts annually, lower pmt (same annual total)" },
            {value: "Bi-weekly_payoff_sooner", label: "Bi-weekly - 26 pmts annually, payoff sooner (2 more pmts annually)" },
            {value: "Weekly", label: "Weekly - 52 pmts annually" }
        ];
        //set the new selected value on the component
        component.set("v.currOptions", currOpts);
        //return the selected value
        component.find("currPmtType").get("v.value");
    }
    ,
    loadNewOptions: function(component, event, helper){
        var newOpts = [
            {value: "", label: "" },
            {value: "Monthly", label: "Monthly - 12 pmts annually" },
            {value: "Semi-monthly", label: "Semi-monthly - 24 pmts annually" },
            {value: "Bi-weekly_lower_payment", label: "Bi-weekly - 26 pmts annually, lower pmt (same annual total)" },
            {value: "Bi-weekly_payoff_sooner", label: "Bi-weekly - 26 pmts annually, payoff sooner (2 more pmts annually)" },
            {value: "Weekly", label: "Weekly - 52 pmts annually" }
        ];
        //set the new selected value on the component
        component.set("v.newOptions", newOpts);
        //return the selected value
        component.find("newPmtType").get("v.value");
    }
})
Can anyone tell me why the two picklists keep acting as though they are the same list?  If there's an easier way to do this, I'm not opposed to altering my approach.  Thanks.
Best Answer chosen by Rebecca Hendricks 3
Hemant_SoniHemant_Soni
Hi,
The issue is You are using same attribute in both of then picklist to store selected value and lightning having two way buindig feature so when ever you are selecting any of picklist then both picklist having same values.
So you need to maintain two differrent Attribute for picklist.
<aura:component implements="flexipage:availableForAllPageTypes" access="global">
    <aura:attribute name="currOptions" type="List" />
    <aura:attribute name="newOptions" type="List" />
    <aura:attribute name="currSelectedValue" type="String" />
 <aura:attribute name="newSelectedValue" type="String" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    
    <div class="slds-form">
        <lightning:card >
            <lightning:select name="currPmtType" label="Current Payment Frequency" aura:id="currPmtType" value="{!v.currSelectedValue}" required="true">
                <aura:iteration items="{!v.currOptions}" var="item">
                    <option text="{!item.label}" value="{!item.value}" selected="{!item.selected}"/>
                </aura:iteration>
            </lightning:select>
            <lightning:input name="currPmtAmt" label="Current Payment Amount" type="number" formatter="currency" required="true"/>
            <lightning:select name="newPmtType" label="New Payment Frequency" aura:id="newPmtType" value="{!v.newSelectedValue}" required="true">
                <aura:iteration items="{!v.newOptions}" var="opt">
                    <option text="{!opt.label}" value="{!opt.value}" selected="{!opt.selected}"/>
                </aura:iteration>
            </lightning:select>
        </lightning:card>
    </div>
</aura:component>
Please let me if stil you are facing any issue.
Thanks
Hemant

All Answers

Hemant_SoniHemant_Soni
Hi,
The issue is You are using same attribute in both of then picklist to store selected value and lightning having two way buindig feature so when ever you are selecting any of picklist then both picklist having same values.
So you need to maintain two differrent Attribute for picklist.
<aura:component implements="flexipage:availableForAllPageTypes" access="global">
    <aura:attribute name="currOptions" type="List" />
    <aura:attribute name="newOptions" type="List" />
    <aura:attribute name="currSelectedValue" type="String" />
 <aura:attribute name="newSelectedValue" type="String" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    
    <div class="slds-form">
        <lightning:card >
            <lightning:select name="currPmtType" label="Current Payment Frequency" aura:id="currPmtType" value="{!v.currSelectedValue}" required="true">
                <aura:iteration items="{!v.currOptions}" var="item">
                    <option text="{!item.label}" value="{!item.value}" selected="{!item.selected}"/>
                </aura:iteration>
            </lightning:select>
            <lightning:input name="currPmtAmt" label="Current Payment Amount" type="number" formatter="currency" required="true"/>
            <lightning:select name="newPmtType" label="New Payment Frequency" aura:id="newPmtType" value="{!v.newSelectedValue}" required="true">
                <aura:iteration items="{!v.newOptions}" var="opt">
                    <option text="{!opt.label}" value="{!opt.value}" selected="{!opt.selected}"/>
                </aura:iteration>
            </lightning:select>
        </lightning:card>
    </div>
</aura:component>
Please let me if stil you are facing any issue.
Thanks
Hemant
This was selected as the best answer
Rebecca Hendricks 3Rebecca Hendricks 3
@Hemant

Thank you so much for the help!!  I'm sort of getting a crash course in this stuff while trying to complete this project.  I tried to go through and split each element into the current and new values.  I must have been looking at the code for so long that I didn't even see that I'd missed this one.