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"))
}
1
  • 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, 2017 at 1:13

1 Answer 1

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
  • 1
    You're right that two-way binding should take care of things.
    – sfdcfox
    Aug 26, 2017 at 1:14

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .