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
Nethra RaghupathyNethra Raghupathy 

Lightning:select takes dynamic values from controller

Hi,
I'm trying to have dynamic dropdown list but I'm not sure how to communicate with controller. It shows error as "Invalid attribute "name": Source" in aura:attribute and aura:handler
UserDetails.cmp:
<aura:component implements="force:appHostable" >
    <lightning:layout class="slds-page-header slds-page-header--object-home">
        <lightning:layoutItem>
            <lightning:icon iconName="standard:scan_card" alternativeText="Add User"/>
        </lightning:layoutItem>
        <lightning:layoutItem padding="horizontal-small">
            <div class="page-section page-header">
                <h1 class="slds-text-heading--label">Add User</h1>
                <h2 class="slds-text-heading--medium">Add User</h2>
            </div>
        </lightning:layoutItem>
    </lightning:layout>
    <lightning:layout>
        <lightning:layoutItem padding="around-small" size="6">
        <div aria-labelledby="newexpenseform">
        <!-- BOXED AREA -->
        <fieldset class="slds-box slds-theme--default slds-container--small">
        <legend id="newexpenseform" class="slds-text-heading--small 
          slds-p-vertical--medium">
          Add User
        </legend>
        <form class="slds-form--stacked">
            <aura:attribute name="users" type="List" />
    		<aura:attribute name="selectedUser" type="String" />
            <aura:handler name="init" value="{!this}" action="{!c.loadOptions}" />
            <lightning:select name="mySelect1" label="Select Role:" aura:id="mySelect1" value="{!v.selectedValue}">
        		<aura:iteration items="{!v.options}" var="item">
            		<option text="{!item.label}" value="{!item.value}" selected="{!item.selected}"/>
         		</aura:iteration>
    		</lightning:select>
        </form>
  
      </fieldset>
    </div>
</lightning:layoutItem>
</lightning:layout>
</aura:component>

UserDetailsController.js:
({
    loadOptions: function (component, event, helper) {
        var roles = [
            { value: "Manager", label: "Manager" },
            { value: "team", label: "team" }
         ];
         component.set("v.options", roles);
        
        var users = [
            { value: "x", label: "x" },
            { value: "y", label: "y" },
            { Value: "z" , label: "z"}
         ];
         component.set("v.users", users);
    }
})

 
Best Answer chosen by Nethra Raghupathy
Sampath SuranjiSampath Suranji
Hi, 

You have to move attributes to top of the page with the 'Option' attribute. Please check below code,
<aura:component implements="force:appHostable" >
    <aura:attribute name="users" type="List" />
    		<aura:attribute name="selectedUser" type="String" />
    		<aura:attribute name="options" type="List" />
            <aura:handler name="init" value="{!this}" action="{!c.loadOptions}" />
            
    <lightning:layout class="slds-page-header slds-page-header--object-home">
        <lightning:layoutItem>
            <lightning:icon iconName="standard:scan_card" alternativeText="Add User"/>
        </lightning:layoutItem>
        <lightning:layoutItem padding="horizontal-small">
            <div class="page-section page-header">
                <h1 class="slds-text-heading--label">Add User</h1>
                <h2 class="slds-text-heading--medium">Add User</h2>
            </div>
        </lightning:layoutItem>
    </lightning:layout>
    <lightning:layout>
        <lightning:layoutItem padding="around-small" size="6">
        <div aria-labelledby="newexpenseform">
        <!-- BOXED AREA -->
        <fieldset class="slds-box slds-theme--default slds-container--small">
        <legend id="newexpenseform" class="slds-text-heading--small 
          slds-p-vertical--medium">
          Add User
        </legend>
        <form class="slds-form--stacked">
            <lightning:select name="mySelect1" label="Select Role:" aura:id="mySelect1" value="{!v.selectedValue}">
        		<aura:iteration items="{!v.options}" var="item">
            		<option text="{!item.label}" value="{!item.value}" selected="{!item.selected}"/>
         		</aura:iteration>
    		</lightning:select>
        </form>
  
      </fieldset>
    </div>
</lightning:layoutItem>
</lightning:layout>
</aura:component>

Best regards
 

All Answers

Sampath SuranjiSampath Suranji
Hi, 

You have to move attributes to top of the page with the 'Option' attribute. Please check below code,
<aura:component implements="force:appHostable" >
    <aura:attribute name="users" type="List" />
    		<aura:attribute name="selectedUser" type="String" />
    		<aura:attribute name="options" type="List" />
            <aura:handler name="init" value="{!this}" action="{!c.loadOptions}" />
            
    <lightning:layout class="slds-page-header slds-page-header--object-home">
        <lightning:layoutItem>
            <lightning:icon iconName="standard:scan_card" alternativeText="Add User"/>
        </lightning:layoutItem>
        <lightning:layoutItem padding="horizontal-small">
            <div class="page-section page-header">
                <h1 class="slds-text-heading--label">Add User</h1>
                <h2 class="slds-text-heading--medium">Add User</h2>
            </div>
        </lightning:layoutItem>
    </lightning:layout>
    <lightning:layout>
        <lightning:layoutItem padding="around-small" size="6">
        <div aria-labelledby="newexpenseform">
        <!-- BOXED AREA -->
        <fieldset class="slds-box slds-theme--default slds-container--small">
        <legend id="newexpenseform" class="slds-text-heading--small 
          slds-p-vertical--medium">
          Add User
        </legend>
        <form class="slds-form--stacked">
            <lightning:select name="mySelect1" label="Select Role:" aura:id="mySelect1" value="{!v.selectedValue}">
        		<aura:iteration items="{!v.options}" var="item">
            		<option text="{!item.label}" value="{!item.value}" selected="{!item.selected}"/>
         		</aura:iteration>
    		</lightning:select>
        </form>
  
      </fieldset>
    </div>
</lightning:layoutItem>
</lightning:layout>
</aura:component>

Best regards
 
This was selected as the best answer
Nethra RaghupathyNethra Raghupathy
Thanks Sampath. It works.