1

I am creating list of lightning:select in an aura:iteration and in each lightining:select consists of list of items and I want to get each index of the lightning:select of each iteration to find which lightning:select is changed the value. I have tried some code

I am trying to put the data-value to get the index in javascript but lightning is not allowing me to put data-value on lightning:select

<aura:iteration items="{!tableList}" var="set" indexVar="childindex">

<td>
    <ui:outputtext class="slds-align_absolute-center" value="{!childindex + 1}"> </ui:outputtext>
</td>

<td>

    <a style="color:black" data-id="{!masterindex}">

        <lightning:select class="label-hidden" value="{!set.field}" data-value="{!childindex}" onchange="{!c.onHeaderChange}">
            <option text="Select any value" value="" />
            <aura:iteration items="{!v.headerOptions}" var="Option">
                <option text="{!Option.label}" value="{!Option.value}" />
            </aura:iteration>
        </lightning:select>

    </a>
</td>
1

I have written some sample code which will help you in understanding how to identify which lightning: select value is changed for which field.

I have basically added a div, assigned the index value as id and making use of event.target to get the index when picklist is changed.

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" >
    <aura:attribute name="tableList" type="List" default="['value 1', 'value 2', 'value 3']"/>

    <aura:iteration items="{!v.tableList}" var="set" indexVar="childindex">   
        <td>
            <ui:outputtext class="slds-align_absolute-center" value="{!childindex + 1}"> </ui:outputtext>
        </td>

        <td>  
            <div id="{!set}">
                <lightning:select aura:id="picklist" name="select" label="" onchange="{! c.onHeaderChange }">
                    <option value="">choose one...</option>
                    <option value="apple">apple</option>
                    <option value="pumpkin">pumpkin</option>
                    <option value="cherry">cherry</option>
                    <option value="blueberry">blueberry</option>
                    <option value="pickle">pickle</option>
                </lightning:select>
            </div>
        </td>
    </aura:iteration>
</aura:component>

controller:

({
    onHeaderChange : function(component, event, helper) {
        var selectedField = event.target.id;
        var selectedValue = event.getSource().get("v.value");
        console.log(selectedValue + ' is selected for field :: ' + selectedField);
    }
})

let me know if it helps..

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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