How to make a picklist in Salesforce lightning component?

Hello Anurag,

tag can be used to make a picklist in lightning component.
You can refer the following example(displaying a picklist of all the accounts):

<aura:component controller="fetchPicklist" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global">
<aura:handler name="init" value="{!this}" action="{!c.doInit}"></aura:handler>
<aura:attribute name="accounts" type="account[]"></aura:attribute>
<aura:attribute name="Contact" type="Contact[]"></aura:attribute>
<aura:attribute name="recordId" type="ID"></aura:attribute>
<aura:attribute name="columns" type="List"></aura:attribute>
<aura:attribute name="ContactList" type="Contact[]"></aura:attribute></aura:component>

<lightning:select label="Choose Account" name="acc" aura:id="acc"> <aura:iteration items="{!v.accounts}" var="account">
<option value="{!account.Id}">{!account.Name}</option></aura:iteration>
</lightning:select>

&nbsp;

<strong>Javascript for doInit method:</strong>

({
doInit: function(component, event, helper) {

var action = component.get("c.getAccountList");
console.log("@@@action",action);
action.setCallback(this, function(result){
var accounts = result.getReturnValue();
console.log("@@@@accounts",accounts);
component.set("v.accounts", accounts);
window.setTimeout(
$A.getCallback( function() {
component.find("acc").set("v.value", accounts[4].Id);
}));
});
$A.enqueueAction(action);
}
})
Apex Controller:
global class fetchPicklist {
public List selectedContacts{get;set;}
@AuraEnabled global static Account[] getAccountList() {
return [SELECT id, Name FROM Account];
}
}
Thanks.

{!account.Name}

Javascript for doInit method:

({
doInit: function(component, event, helper) {

var action = component.get("c.getAccountList");
console.log("@@@action",action);
action.setCallback(this, function(result){
var accounts = result.getReturnValue();
console.log("@@@@accounts",accounts);
component.set("v.accounts", accounts);
window.setTimeout(
$A.getCallback( function() {
component.find("acc").set("v.value", accounts[4].Id);
}));
});
$A.enqueueAction(action);
}
})
Apex Controller:
global class fetchPicklist {
public List selectedContacts{get;set;}
@AuraEnabled global static Account[] getAccountList() {
return [SELECT id, Name FROM Account];
}
}
Thanks.

• This reply was modified 8 years ago by  shradha jain.