-1

I'm writing a lightning component that create rows dynamically and there a field to display picklist values in it. Currently my issue is that, though the values are getting fetched as expected, I'm unable to see them when I select an option as the selected picklist value, but I'm able to log the exact value that's selected in the dropdown. Here is my code.

<aura:component controller="testCntrlr" access="global">
    <aura:attribute name="dailyTaskList" type="Daily_Task__c[]"/>
    <aura:attribute name="options" type="List" access="PRIVATE"/>
    <aura:attribute name="selectedVal" type="String" access="PRIVATE"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:attribute name="dailyTask" type="Daily_Task__c" default ="{ 'sobjectType':'Daily_Task__c'}"/>
    <aura:attribute type="String" name="title" />

    <div class="slds-box" aura:id="parent" style="padding:2em">
         <div class="slds slds-border_top">
            <!--Table Part-->
            <table class="slds-table slds-table_bordered slds-table_cell-buffer ">
               <tbody>
                    <aura:iteration items="{!v.dailyTaskList}" var="item" indexVar="index">
                        <tr class="slds-text-title_caps">
                            <td>
                                <lightning:select name="select" aura:id="select" value="{!item.Task_Type__c}" onchange="{!c.getTheWorkType}">
                                    <aura:iteration items="{!v.options}" var="option">
                                        <option text="{!option}" value="{!option}" selected="{!option}"/>
                                    </aura:iteration>
                                </lightning:select>
                            </td>
                        </tr>
                    </aura:iteration>
                </tbody>
            </table>
        </div>
    </div>
</aura:component>

my JsController

doInit : function(component, event, helper) {
        var action = component.get("c.getPicklistOptions");
        var contactObj = component.get("v.dailyTask");
        var today = $A.localizationService.formatDate(new Date(), "MM-DD-YYYY");
        component.set('v.today', today);
        var opts=[];
        action.setParams({
            'fieldName':'Task_Type__c',
            'sObjectName':'Daily_Task__c'
        });
        action.setCallback(this, function(a) {
            console.log(a.getState());
            console.log(JSON.stringify(a.getReturnValue()));

            var allValues = a.getReturnValue();
            component.set('v.options', allValues);
            var RowItemList = component.get("v.dailyTaskList");
            RowItemList.push({
                "sobjectType":"Daily_Task__c",
                "Task_Name__c":"",
                "Description__c":"",
                "Daily_Update__c":"",
                "DE_Name__c":"",
                "Leave_From__c":"",
                "Leave_To__c":"",
                "Due_Date__c":"",
                "Created_Task_Date__c":"",
                "Closed__c":"",
                "Time_Required__c":""
            });
            component.set("v.dailyTaskList", RowItemList);
        });
       $A.enqueueAction(action); 

    },

getTheWorkType: function(component, event, helper){
        var selectedValue =event.getSource().get('v.value');

        if(selectedValue=='User Stories'){
            console.log('true');

        } else{
            console.log('False');

        }
    }

when I run this program here is what I get in my logs ["AppExchange","Blog Post","Customer Demo","Deal Assist","Demo Component","Dreamforce","Meetings","On Leave","Salesforce Trailheads","Strategic Assist","Training External","Training Internal","Udemy","User Stories","Volunteering"]

Here is a gif showing the issue.

enter image description here

Please let me know on where am I going wrong and how can I fix it.

Thanks

  • 1
    as per your GIf, 1st you select `Udemyy it went to false condition so it shows false, then you select Training external , empty object adds in to debug log? but what you expect ? can you explain more details – sdandamud1 Oct 21 '19 at 13:23
  • Hi @sdandamud1, that's just for my under getTheWorkType method. but the actual issue lies in the lightning:select. The selected dropdown value doesn't appear in the dropdown. – user3872094 Oct 21 '19 at 14:36
1

your lightning:select selected value is item.Task_Type__c, so you need to update your current row Item Task_Type__c value with selected value by using Index , here is sample code snippet. let me know if you have any issue.

cmp

<aura:iteration items="{!v.dailyTaskList}" var="item" indexVar="index">
                    <tr class="slds-text-title_caps">
                        <td>
                            <lightning:select name="{!index}" aura:id="select" value="{!item.Task_Type__c}" onchange="{!c.getTheWorkType}">
                                <aura:iteration items="{!v.options}" var="option">
                                    <option text="{!option}" value="{!option}" selected="{!option}"/>
                                </aura:iteration>
                            </lightning:select>
                        </td>
                    </tr>
                </aura:iteration>

cmpController.Js

getTheWorkType: function(component, event, helper){
     var index = event.getSource().get("v.name"),
     RowItems = component.get("v.dailyTaskList"),
     currentrow = RowItems [index],
     selected = event.getSource().get("v.value"),
     currentrow.Task_Type__c = selected;
     RowItems.splice(index ,1, currentrow);
     component.set("v.dailyTaskList",RowItems);
}
| improve this answer | |

Not the answer you're looking for? Browse other questions tagged or ask your own question.