[SalesForce] onchange event listener for ui:inputSelect not working

I am trying to implement a picklist using the Aura component <ui:inputSelect> with a change event listner. But I see that the change event listener (JavaScript function) is not getting registered with the component.

Below is my component markup

Component Markup

And this is the code in my JS controller:

onChangeFunction: function(component) {
 console.log(component.get('v.value'));
}

Please see that in Chrome web inspector, there is no change event listener registered for the component. So, if I change the value of the picklist component, the onchange event listener function "onChangeFunction" in my controller is not getting invoked. This is my problem

enter image description here

Best Answer

Since you haven't given value attribute for the <ui:select/> component, you could do selectCmp.get("v.value") since it is internally available.Click here to find more attributes that are available in the component.

onChangeFunction: function(component,event) {
    console.log(event.getSource().get('v.value')); //only works for aura:component like <ui:inputSelect/>
}

If the value is attribute is binded to aura:attribute, you could do below:

<aura:attribute name="selectedRecType" type="String" access="private" />
<ui:inputSelect value="{!v.selectedRecType}" change="{!c.onChangeFunction}">
 ...
</ui:inputSelect>

Method in Controller.js should look like this:

onChangeFunction: function(component,event) {
    console.log(component.get('v.selectedRecType'));
}

--Update--

I tried to reproduce the issue,but change function works at my end.

Component:

<aura:component>
    <aura:attribute name="contactLevel" type="List" access="private"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

    <ui:inputSelect aura:id="levels" label="Contact Levels" change="{!c.onChangeFunction}">
        <aura:iteration items="{!v.contactLevel}" var="level">
             <ui:inputSelectOption text="{!level}" label="{!level}"/>
        </aura:iteration>
    </ui:inputSelect>
</aura:component>

Controller.js:

({
    doInit : function(cmp,event,helper){
        cmp.set("v.contactLevel",['Primary Contact', 'Secondary Contact', 'Other']);
    },
    onChangeFunction : function(cmp,event){
       console.log(event.getSource().get("v.value"));        
    }
})
Related Topic