0

I have a Lightning component ui:inputSelect, and I'm trying to capture an OnChange.It appears that it very well documented to do it but I cannot seem to figure out what I'm doing wrong, I've tried many different iterations but my selectedValue always comes back undefined

Markup

<aura:component>
    <aura:attribute name="options" type="List"/>
    <aura:attribute name="selectedValue" type="String"/>    
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>
    <aura:attribute name="pickListTitle" type="String"/>

    <div>
        <ui:inputSelect label="{!v.pickListTitle}" class="dynamic" aura:id="optionItems" change="{!c.onChange}" value="{!v.selectedValue}"/>
    </div>
</aura:component>

My buildOptions in my helper works fine, ill post it anyway just for context

Helper

buildOptions : function(component) {
    var body = component.get("v.options"); 

    var options = [];

    for(var i=0; i < body.length; i++){
        options.push({"class": "optionClass", label: body[i], value: body[i]});
    }

    component.find("optionItems").set("v.options", options);    
}

I've tried so many different things in my controller to capture this change, and this iteration may be completely incorrect, does anyone have any guidance?

Controller

onChange: function(component, event) {
    var selectCmp = component.find("optionItems");
    resultCmp.set("v.selectedValue", selectCmp.get("v.selectedValue"));
    console.log('+ selectCmp' + selectCmp.get("v.selectedValue"))
}
  • You don't need to capture the change for this purpose, because of two way binding. As such, I suspect this may be an x-y problem. Perhaps you should ask a question about what you're trying to accomplish. – sfdcfox Aug 26 '17 at 1:13
2

Your component has the v.selectedValue attribute (whereas ui:inputSelect has a v.valueattribute) so in your onChange it would be:

component.get("v.selectedValue")

to access that value not:

selectCmp.get("v.selectedValue")

My first guess is that the onChange method may not even be needed assuming there is two-way binding. You could check that with this just for debug purposes:

onChange: function(component, event) {
    console.log('selected=' + component.get("v.selectedValue"))
}

If the method is needed, I'd expect it to look more like this:

onChange: function(component, event) {
    var select = component.find("optionItems");
    component.set("v.selectedValue", select.get("v.value"));
    console.log('selected=' + component.get("v.selectedValue"))
}
  • 1
    You're right that two-way binding should take care of things. – sfdcfox Aug 26 '17 at 1:14

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.