[SalesForce] unable to get index var from lightning:select option (undefined)

component.cmp 

    <lightning:select name="Version" label="Select a version" disabled="true" onchange="{!c.itemsChange}">
                <option value="">choose one...</option>
                <aura:iteration items="{!v.Productversion}" var="product" indexVar="index">
                    <option text="{!product.label}" value="{!product.value}" index="{!index}" selected="{!product.selected}"/>
                </aura:iteration>
            </lightning:select>

controller.js

itemsChange : function(component, event, helper) {
        console.log("index-->"+event.getParam("index"));
        console.log("index2-->"+event.getSource().get("v.index"));
        console.log("index-->"+event.currentTarget.index);
    }

Trying to get the index of my selected item (i can fetch the value or label without issue). 3 above attemps return undefined, what would be the correct way for referencing the selected item's index in my controller?

Best Answer

The index is on the option, but the event fires from the lightning:select. That means there's no point in using an index attribute, because you'll still have to find it:

var values = component.get("v.Productversion"),
    itemValue = event.getSource().get("v.value"),
    selected = values.find(value => value.value === itemValue);
console.log(values.indexOf(selected));

There's a few other odd ways you could do this, but Locker Service will screw up most of your casual attempts to use other methods. This is likely the easiest method to use to discover the index of your selected item. As a bonus, you don't need to use indexVar at all.

Related Topic