Select element with Dart/Polymer: How to get index on-select - dart

Question

So I have the following Dart/Polymer Class:
#CustomTag('my-select-element')
class MySelectElement extends PolymerElement {
#observable int currentIndex = 1;
MySelectElement.created() : super.created() {}
void changed() {
print(currentIndex);
}
}
and the matching html template:
<template name="my-select-element">
<select on-change="{{changed}}" selectedIndex="{{currentIndex}}">
<option>Index 0</option>
<option>Index 1</option>
<option>Index 2</option>
</select>
</template>
When I click an option of the select element, I get the right index - from the click before.
As w3schools event attributes tells me, this is correct behavior and I should use onselect instead of onchange to get the value after it has changed.
However, I can't find onselect or on-select or anything like it, and when I build the select element via dart alone, onChange.listen delivers the desired, if incorrect, result.
I know I could always retrieve the result after a button has been pressed, but in this scenario, I want to do stuff without waiting.
Am I just missing the right keyword?

Answer 1

This way I get the selectedIndex after the selection.
When I tried to bind to value as well the default value stopped working (so I commented it out).
This example shows to ways to be notified about changes:
event handler
change notification of observable property
<polymer-element name="my-select" >
<template>
<select selectedIndex="{{currentIndex}}" on-change="{{changedHandler}}">
<option>Index 0</option>
<option>Index 1</option>
<option>Index 2</option>
</select>
<!-- <div>value: {{value}}</div> -->
<div>currentIndex: {{currentIndex}}</div>
</template>
<script type='application/dart' src='my_select.dart'></script>
</polymer-element>
library x;
//import 'dart:async';
import 'dart:html';
import 'package:polymer/polymer.dart';
#CustomTag('my-select')
class MySelect extends PolymerElement {
#observable int currentIndex = 1;
#observable int value = 1;
MySelect.created() : super.created() {
print('MySelect');
}
void changedHandler(event, details, Element target) {
print('changed: ${currentIndex}');
}
void currentIndexChanged(old) {
print('currentIndexChange: ${currentIndex}');
}
}

Answer 2

I had to adapt the changeEventHandler method to get the JS version to work properly:
void changeEventHandler(Event e, var details, var target) {
/* Fix JS bug - ${currentIndex} still refers to the old value whereas in Chrome it already has the new value */
currentIndex = target.selectedIndex;
}