TransWikia.com

lightning:select selected value is not set

Salesforce Asked by XL Zhang on November 17, 2021

I am very new to Aura component and Salesforce, I am trying to have a drop down which allow the user to pick from the list. the values of the list come from sobject. I looked into many online examples on how to do the LIghtning:Select, but I always get undefined for the selected value. Can anyone help me to figure out how?

—- aura component code —

<div>
    <lightning:select aura:id="lstProjectEpic" name="lstProjectEpic" label="Project Epics"    >
  <aura:iteration items="{!v.lstProjectEpic}" var="epic">
         <option value="{!epic.Name}" selected="{!epic.selectedValue}" > {!epic.Name}</option>
   </aura:iteration>
  </lightning:select>
</div>

—- in the controller i have this code to get the selected value, and then pass it as the parameter to the Apex code method —

    var selectedEpic =component.find("lstProjectEpic").get("v.value"); 
     console.log("selected Project Epic " + selectedEpic);

Console log shows the value is always undefined. Do i need to do anything extra?

I also want to set the Select a default value when the page is first loaded and then when the value is selected, it calls the apex codes to retrieve and display the data based on the selected option and display the data back. I don’t know how to set default value either. I put such action in the init handler. Please advise.

—- updated

I realized the lightning:select cannot be used for multi options. I changed to use DualListBox. I tried to reload the page with the list of projects based on the selected criteria, so i put it the handleChange event, and call the helper which will set the parameter of the apex code using the selected values from the duallistbox, and then page gets reloaded with new list of projects. I am not quite sure how to pass the selected values to the apex code and where to set the page reload. I got helper.getProjectAndTasks(component, event, helper) in the handleChange event.

—Aura Component code —

  <aura:attribute name="options" type="List" default="[]"/>
<aura:attribute name="values" type="List" default="[]"/>



<lightning:dualListbox name="multipleOptions"  
                       label= "Departments" 
                       sourceLabel="Available" 
                       selectedLabel="Selected" 
                       options="{!v.options}" 
                       value="{!v.values}" 
                       onchange="{! c.handleChange }"/>

—- controller —

({
      doInit : function(component, event, helper) {
      helper.getProjectAndTasks(component, event, helper);
      // helper.getNotes (component, event, helper);
      // helper.getProjectEpics(component, event, helper);

      //  helper.getNewEpicValue (component,event,helper);
      helper.getUserProfile(component, event, helper);
      helper.getDepartments(component, event, helper); 
   },

   handleChange: function (cmp, event) {
       // This will contain an array of the "value" attribute of the selected options
       var selectedOptionValue = event.getParam("value");
       // alert("Option selected with value: '" + selectedOptionValue.toString() + "'");

    console.log("Option selected with value: '" + selectedOptionValue.toString() + "'"); 

    helper.getProjectAndTasks(component, event, helper);
   }
  })

— helper —

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


            var selectedOptionValue = event.getParam("value");

      var   action = component.get('c.getProjectWithTaskAndNotesByEpic');
         action.setParams({ "Departments" : selectedOptionValue });


            action.setCallback(this,function(response)
                       {
                           var state= response.getState();
                           if(state == "SUCCESS")
                           {
                               console.log('reponse : ' + response.getReturnValue());
                               var proj = response.getReturnValue();



                               component.set('v.lstProject',response.getReturnValue());
                           }
                       });
                       $A.enqueueAction(action);
},
getDepartments : function  (component, event, helper){

                var action = component.get('c.getDepartments');
            action.setCallback(this,function(response)
                       {
                           var state= response.getState();
                           if(state == "SUCCESS")
                           {
                                var departments =response.getReturnValue();
                               console.log('Departments are : ' + departments);                         
                                var items =[];
                               for(var d in departments)
                               {
                                             var item = {
            "label":  departments[d] ,
            "value":  departments[d]   
        };
                                               items.push(item);
                               }
                               component.set('v.options',items);

                           }
                       });
                       $A.enqueueAction(action);    


   }
})

— apex controller —

@AuraEnabled
public static List<String> getDepartments(){
           List<department__c> departments = new List<department__c>();
        departments = [select  name  from  department__c  ]; 
    System.debug(departments.size());
    List<String> deptName = new List<String>();
    for(department__c d : departments){
        deptName.add(d.Name);
    }
    return  deptName ;
}

     public static List<ProjectWrapper> getProjectWithTaskAndNotesByEpic( ){
      ------logic to pull the proejct related coe
  }

3 Answers

I just realized that I missed the event parameter in my call to the Helper in handleChange.

Answered by XL Zhang on November 17, 2021

As you didnt post the JS code to show how you are setting the array of epics, I can suggest below:

Use below attribute

<aura:attribute name="selectedEpic" type="String" />

Now use this as value in select

<lightning:select aura:id="lstProjectEpic" value="{!v.selectedEpic}" name="lstProjectEpic" label="Project Epics" >

You can get the selected value by:

console.log("selected Project Epic " + component.get("v.selectedEpic"));

For your understanding:
1. selected in option is a boolean, so whichever value u pass as true will be selected by default. For example, in below code option "asd" will be selected by default.

component.set("v.lstProjectEpic",[
            {Name:'qwe'},{Name:'asd',selectedValue:true},{Name:'zxc'}
        ]);

2. component.find("lstProjectEpic").get("v.value") should have worked. It might be the case that you are trying to get the value even before its selected - as you are not using change handler. You can post full code here for better understanding.

Answered by salesforce-sas on November 17, 2021

you should consider using a change handler instead as pointed out in the documentation:

component.cmp

<aura:component>
    <aura:attribute name="status" type="String" default="open"/>
    <aura:handler name="change" value="{!v.status}" action="{!c.handleChange}"/>
    <lightning:select aura:id="select" name="select" label="Opportunity Status" value="{!v.status}">
        <option value="">choose one...</option>
        <option value="open">Open</option>
        <option value="closed">Closed</option>
        <option value="closedwon">Closed Won</option>
    </lightning:select>
    <lightning:button name="selectChange" label="Change" onclick="{!c.changeSelect}"/>
</aura:component>

controller.js

handleChange: function (cmp, event, helper) {
    //Do something with the change handler
    alert(event.getParam('value'));
}

and for future reference, feel free to refer to the official documentation for examples and component usage. =)

Answered by glls on November 17, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP