Skip to main content

Connect #ZOOM with #Salesforce using #Zapier | Salesforce Tutorials

Set selected value dynamically in Picklist/lightning:select in lightning component.




How to set selected value dynamically in lightning select in salesforce lightning component ?

If you are developing something in lightning component then you must have face the situation to store selected value in your picklist.

Sometimes it works directly by setting the value in your lightning select. But if you are using a dynamic list and Key Value pair with an iteration to set the values, in that case setting value directly will not work.

We have to do some extra efforts with setting the value from controller. 

Please check the example below : 

In this example I am having a picklist of months and I want to change the selected value dynamically.

Component

1
2
3
4
5
 <lightning:select value="{!v.selectedMonth}" aura:id="selectMonth" label="Select Month" onchange="{!c.changeMonth}">       
     <aura:iteration items="{!v.picklistValues}" var="item" indexVar="index">
         <option value="{!item.key}">{!item.value}</option>
     </aura:iteration>
 </lightning:select>

I have created a picklist in my component, in value I am having an attribute to store selected month.

I have a list of months in picklistValues attribute. And in option I am setting the key and values.

For example suppose in value I am having Jan, Feb, March and in key I have 1,2,3.

To set the selected value in selectedMonth attribute we have to set the value in it from controller and after that we just have to add a extra line in iterations option, Please check below example.


Component after setting the value

1
2
3
4
5
<lightning:select value="{!v.selectedMonth}" aura:id="selectMonth" label="Select Month" onchange="{!c.changeMonth}">       
    <aura:iteration items="{!v.picklistValues}" var="item" indexVar="index">
        <option value="{!item.key}" selected="{!item.key==v.selectedMonth}" >{!item.value}</option>
    </aura:iteration>
</lightning:select>

As you can see in above code we have added a new property in option and we have check it it is matching the current item's key.

It will set the value dynamically in your picklist.

Share this blog with your friends if you find this post useful.


Comments

Popular posts from this blog

How to send WhatsApp from Lightning Component Salesforce ?

Send WhatsApp from Lightning Component SalesforceHi folks, in this article I will explain how you can send WhatsApp from Lightning Component using https://wa.me/
In this example I will create a Quick Action button on Contact which will be connected with my Lightning Component.
Please follow the steps below : 
Step 1 : Create a Lightning Component & Apex as shown below
WhatsApp.cmp
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30<aura:componentcontroller="Vlog_whatsappCTRL"implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction"access="global"><aura:attributename="recordId"type="String"/><aura:attributename="con"type="Contact"/><aura:attributename="msg"type="String"/><aura:handlername="init"action…

Send WhatsApp and Save Chat using Lightning Component Salesforce | Salesforce Tutorials

Hello folks,
In this article you will learn to send WhatsApp and Save the Chat using Lightning Component Salesforce. 
Prerequisite : 
Create a custom object WhatsApp__c
Create custom fields as shown below : 


Please follow the code below : 

WhatsAppComponent 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30<aura:componentcontroller="Vlog_whatsappCTRL"implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction"access="global"><aura:attributename="recordId"type="String"/><aura:attributename="con"type="Contact"/><aura:attributename="msg"type="String"/><aura:handlername="init"action="{!c.doInit}"value="{!this}"/><articleclass="slds-card"><divclass="slds-card__header…

Get Parent Id when overriding standard actions with a Lightning Component in salesforce1 app

How to Get Parent Id when overriding standard actions with a Lightning Component in salesforce1 app ?
In this blog I will explain how you can get Parent Id when overriding standard actions with a lightning component.
For example I have changed my Opportunity New button action with a custom Lightning Component. 
Let's create a new account and from the related tab try creating the new Opportunity. Have you noticed any change in URL ?
Let me share the URL with you :  _________________________________________________________________________ https://kapilbatra1-dev-ed.lightning.force.com/lightning/o/Opportunity/new?recordTypeId=0127F000000htlpQAA&additionalParams=accid%3D0017F00002S6g9H%26&inContextOfRef=1.eyJ0eXBlIjoic3RhbmRhcmRfX3JlY29yZFBhZ2UiLCJhdHRyaWJ1dGVzIjp7Im9iamVjdEFwaU5hbWUiOiJBY2NvdW50IiwicmVjb3JkSWQiOiIwMDE3RjAwMDAyUzZnOUhRQVIiLCJhY3Rpb25OYW1lIjoidmlldyJ9LCJzdGF0ZSI6e319&count=3 _________________________________________________________________________
In above URL you …