+ Start a Discussion
Raghu RamanujamRaghu Ramanujam 

lightning select : Display Selected Value after Save

Hi Gurus,
I followed the below link to create a Picklist field in the component.

https://naveendhanaraj.wordpress.com/2018/06/19/lightning-picklist-component/

It works fine, the selected value is saved correctly.. But I am not able to display the selected value. It shows the first value in list.
Can you please guide me ..

Thanks,

Raghu

Best Answer chosen by Raghu Ramanujam
Raghu RamanujamRaghu Ramanujam
But, if the remove the value tag the data is not stored in the database.
This the below code from documentation.

<aura:component>
<aura:attribute name="options" type="List" />
<aura:attribute name="selectedValue" type="String" default="Red"/>
<aura:handler name="init" value="{!this}" action="{!c.loadOptions}" />
<lightning:select name="mySelect" label="Select a color:" aura:id="mySelect" value="{!v.selectedValue}">
<aura:iteration items="{!v.options}" var="item">
<option text="{!item.label}" value="{!item.value}" selected="{!item.selected}"/> </aura:iteration> </lightning:select> </aura:component>
In your client-side controller, define an array of options and assign this array to the items attribute.
({ loadOptions: function (component, event, helper) { var opts = [ { value: "Red", label: "Red" }, { value: "Green", label: "Green" }, { value: "Blue", label: "Blue" } ]; component.set("v.options", opts); } })

All Answers

ApuroopApuroop
Hey Raghu, try and replace lightning:select tag with the following.
<lightning:select label="Status">       
    <option value="">Choose one...</option>
    <aura:iteration items="{!v.picklistValues}" var="item">
        <option value="{!item.value}">
            {!item}
        </option>
    </aura:iteration>
</lightning:select>
You were giving the value for the select tag. I guess that's the reason. Also, the label is required for lightning:select tag. 

Reference: https://developer.salesforce.com/docs/component-library/bundle/lightning:select/specification
Raghu RamanujamRaghu Ramanujam
Hi Apuroop,

I am using the below for lightning select, is this correct ?

 <lightning:select aura:id="Select" value="{!v.prlist[0].CVP__c}" label="Test" onchange="{!c.handleCompanyOnChange}">      
                                                
                                                <aura:iteration items="{!v.picklistValues}" var="item" indexVar="key"> 
                                                    <option value="{!item.value}" selected="{!item.Selected==v.prlist[0].CVP__c}">  
                                                        {!item} 
                                                        </option>  
                                                    
                                                </aura:iteration> 
                                            </lightning:select> 

Thanks,
Raghu
ApuroopApuroop
Get rid of the value attribute in the lightning:select tag and see if you're able to capture the data. I observed that is the reason the picklist value doesn't change when you select other options, it's always showing the first value. Also, the selected attribute in the option tag, trying to make it a default value?

Compare your code to the one in this project, it's extremely clear. Thanks to you, I just completed that project. :D
https://trailhead.salesforce.com/content/learn/projects/workshop-override-standard-action
 
Raghu RamanujamRaghu Ramanujam
But, if the remove the value tag the data is not stored in the database.
This the below code from documentation.

<aura:component>
<aura:attribute name="options" type="List" />
<aura:attribute name="selectedValue" type="String" default="Red"/>
<aura:handler name="init" value="{!this}" action="{!c.loadOptions}" />
<lightning:select name="mySelect" label="Select a color:" aura:id="mySelect" value="{!v.selectedValue}">
<aura:iteration items="{!v.options}" var="item">
<option text="{!item.label}" value="{!item.value}" selected="{!item.selected}"/> </aura:iteration> </lightning:select> </aura:component>
In your client-side controller, define an array of options and assign this array to the items attribute.
({ loadOptions: function (component, event, helper) { var opts = [ { value: "Red", label: "Red" }, { value: "Green", label: "Green" }, { value: "Blue", label: "Blue" } ]; component.set("v.options", opts); } })
This was selected as the best answer