Force databind synchronization on lightning select?

Question

I am having a problem where a lightning select component definitely has a value other than the first item selected, but in the js helper method when I am calling

var temp = component.find('dropdown_id').get('v.value');
console.log(temp);

it is returning the value of the first in the select, rather than the one that is actually selected.

When my component initially loads, it only has one item in the set,

<option text="Select a field" value="INITIIAL"/>

I made the value "INITIAL" to make it obvious. There is an <aura:iteration> portion which is tied to an <aura:attribute> and the selected item is set based on an additional <aura:attribute>. These are dynamically loaded after the page is initially loaded. It works correctly because the rendered dropdown actually has the right value selected in it once the data loads. However, calling .get('v.value') is returning "INITIAL". It's not an issue of time, because for testing purposes, I can have added an arbitrary amount of delay between when the data loads and when I try to call .get('v.value') by using a test button I added to the page.

I believe what is happening is that for some reason in this particular circumstance, Lightning does not know that it needs to refresh its understanding of the state of the component.

Is there a way to manually tell Lightning to synchronize things? For example, in angular, you can manually call $apply() to synchronize things. You are generally supposed to avoid doing this, but there are certain circumstances where it is necessary.

Answer 1

You could try to handle selected value by listening event onchange rather value attribute:

<lightning:select ... onchange="{v.handleSelectValueChange}">
...
handleSelectValueChange: function(component, event, helper) {
    console.log('... selected value:', event.getParam('value'));
}