function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Anu Singh 40Anu Singh 40 

how to set id in aura attribute from lightning select for a selected option

Hi ,
I am new to lightning. I have a lightning select for showing options here option are list of contact.
<div>
                   Contact: <lightning:select name="con" class="slds-combobox_container slds-size_small"  
                                              aura:id="con" value="{!v.selectedContact}" onchange="{!c.changeAction}" >
                       <option value="">choose one...</option>
                 <aura:iteration items="{!v.conOption}" var="opt">
                     <option text="{!opt.LastName}" value="{!opt.id}" selected="{!opt.selected}" /> 
               </aura:iteration>
               </lightning:select>
                      </div>    

And I have a attribute 
<aura:attribute name="selectedContact" type="String" />

I want selectedContact show con.Id But When I am geeting the value in a function using var selectedCon=component.get('v.selectedContact');
it shows Name of contact I want Id of Contact
How Can I do that. Please help
Thankyou in Advance
Best Answer chosen by Anu Singh 40
ravi soniravi soni
Hi Anu Singh,
you can get reference from following way for fulfill your requirment.
//HTML
<aura:component implements="flexipage:availableForRecordHome,
                            force:hasRecordId" access="global" 
                controller="fetchContact">
    <aura:handler name="init" value="{!this}" action="{!c.doInIt}"/>
    <aura:attribute name="selectedContact" type="String" />
    <aura:attribute name="conOption" type="contact[]" />
    <div>
                    
        <lightning:select name="con" 
                          class="slds-combobox_container slds-size_small"  
                          label="Contact" 
                          aura:id="con" value="{!v.selectedContact}" onchange="{!c.changeAction}" >
                       <option value="">choose one...</option>
                 <aura:iteration items="{!v.conOption}" var="opt">
                     {!opt.LastName}
                     <!--<option text="{!opt.LastName}" value="{!opt.Id}" selected="{!opt.selected}" /> -->
                      <option value="{!opt.Id}">{!opt.LastName}</option>
               </aura:iteration>
               </lightning:select>
                      </div>  
    selectedContact : {!v.selectedContact}

</aura:component>
 
//Controller
({
	doInIt : function(component, event, helper) {
        var action = component.get("c.fetchRecord");
        
        action.setCallback(this, function(response) {
            var state = response.getState();
            alert('state : ' + state);
            if (state === "SUCCESS") {
                var fetchRecords = response.getReturnValue();
                console.log("fetchRecords From server: " + JSON.stringify(fetchRecords));
            component.set('v.conOption',fetchRecords);      
            }
            else if (state === "INCOMPLETE") {
                // do something
            }
            else if (state === "ERROR") {
                var errors = response.getError();
                if (errors) {
                    if (errors[0] && errors[0].message) {
                        console.log("Error message: " + 
                                 errors[0].message);
                    }
                } else {
                    console.log("Unknown error");
                }
            }
        });
 
        $A.enqueueAction(action);
		
	},
    changeAction : function(component, event, helper) {
        var conId = event.getSource().get('v.value');
        alert(conId);
        component.set('v.selectedContact',conId);
    }
})
 
//Apex
public with sharing class fetchContact {
     @AuraEnabled 
    public static list<Contact> fetchRecord(){
        return [SELECT Id,FirstName,LastName From Contact limit 10];
        
    }
}

let me know if it helps you and close your query by marking it as best answer.
if it helps you,it is essential to mark it as best because your best mark give us motivation for working in this way.
Thank you
 

All Answers

ravi soniravi soni
Hi Anu Singh,
you can get reference from following way for fulfill your requirment.
//HTML
<aura:component implements="flexipage:availableForRecordHome,
                            force:hasRecordId" access="global" 
                controller="fetchContact">
    <aura:handler name="init" value="{!this}" action="{!c.doInIt}"/>
    <aura:attribute name="selectedContact" type="String" />
    <aura:attribute name="conOption" type="contact[]" />
    <div>
                    
        <lightning:select name="con" 
                          class="slds-combobox_container slds-size_small"  
                          label="Contact" 
                          aura:id="con" value="{!v.selectedContact}" onchange="{!c.changeAction}" >
                       <option value="">choose one...</option>
                 <aura:iteration items="{!v.conOption}" var="opt">
                     {!opt.LastName}
                     <!--<option text="{!opt.LastName}" value="{!opt.Id}" selected="{!opt.selected}" /> -->
                      <option value="{!opt.Id}">{!opt.LastName}</option>
               </aura:iteration>
               </lightning:select>
                      </div>  
    selectedContact : {!v.selectedContact}

</aura:component>
 
//Controller
({
	doInIt : function(component, event, helper) {
        var action = component.get("c.fetchRecord");
        
        action.setCallback(this, function(response) {
            var state = response.getState();
            alert('state : ' + state);
            if (state === "SUCCESS") {
                var fetchRecords = response.getReturnValue();
                console.log("fetchRecords From server: " + JSON.stringify(fetchRecords));
            component.set('v.conOption',fetchRecords);      
            }
            else if (state === "INCOMPLETE") {
                // do something
            }
            else if (state === "ERROR") {
                var errors = response.getError();
                if (errors) {
                    if (errors[0] && errors[0].message) {
                        console.log("Error message: " + 
                                 errors[0].message);
                    }
                } else {
                    console.log("Unknown error");
                }
            }
        });
 
        $A.enqueueAction(action);
		
	},
    changeAction : function(component, event, helper) {
        var conId = event.getSource().get('v.value');
        alert(conId);
        component.set('v.selectedContact',conId);
    }
})
 
//Apex
public with sharing class fetchContact {
     @AuraEnabled 
    public static list<Contact> fetchRecord(){
        return [SELECT Id,FirstName,LastName From Contact limit 10];
        
    }
}

let me know if it helps you and close your query by marking it as best answer.
if it helps you,it is essential to mark it as best because your best mark give us motivation for working in this way.
Thank you
 
This was selected as the best answer
ShivankurShivankur (Salesforce Developers) 
Hi Anu,

You can use syntax like below in your js controller like below to get the ID of the selected contact and show it as you want:
var conId = event.getSource().get('v.value');        
component.set('v.selectedContact',conId);
For more getting more insight on implementation part refer below thread:
https://salesforce.stackexchange.com/questions/106015/lightning-how-do-i-get-the-selected-value-from-a-select-dropdown-list-send-i

Hope above information helps. Please mark as Best Answer so that it can helps others in future.

Thanks.
Suraj Tripathi 47Suraj Tripathi 47
Hi Anu Singh,
You can get a reference from this Link-->
https://salesforce.stackexchange.com/questions/201182/lightningselect-bind-the-selected-attribute
 
<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>
if you have any query please comment.
---------------
If you find your Solution then mark this as the best answer to close this question. 

Thank you!
Regards,
Suraj Tripathi